Reusing Navigation and Common Page Structure
Sveip for å vise menyen
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.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
