Reusing Navigation and Common Page Structure
Glissez pour afficher le menu
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.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
