Reusing Navigation and Common Page Structure
Svep för att visa menyn
In most applications, certain UI elements appear on multiple pages. For example, navigation menus, headers, and footers are often shared across different parts of the app.
Instead of adding these elements to every page manually, you should reuse them through layouts and components.
This keeps your code clean and ensures a consistent user experience.
Creating a Reusable Navigation Component
First, create a separate component for navigation:
import Link from "next/link";
export default function Navigation() {
return (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/dashboard">Dashboard</Link>
</nav>
);
}
Using Navigation in a Layout
Now include this component inside your layout:
import Navigation from "../components/Navigation";
export default function RootLayout({ children }) {
return (
<html>
<body>
<Navigation />
<main>{children}</main>
</body>
</html>
);
}
Now the navigation will appear on every page.
Reusing Structure Across Sections
You can also reuse structure inside nested layouts:
export default function DashboardLayout({ children }) {
return (
<div>
<aside>Sidebar</aside>
<main>{children}</main>
</div>
);
}
This layout applies only to dashboard pages, keeping that section consistent.
Why This Approach Works
You avoid repeating the same code in multiple pages. Updates are easier because you change code in one place. Your UI remains consistent across the application. Your project structure becomes more organized.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
