Reusing Navigation and Common Page Structure
Swipe to show 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.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
