Advanced Layouts
Nested layouts, layout groups, parallel routes, and shared layouts.
Overview
Layouts provide persistent UI across multiple pages.
Key Concepts
- Nested Layouts β Layouts that wrap specific routes
- Layout Groups β Group routes with shared layout
- Parallel Routes β Render multiple layouts simultaneously
- Shared Layouts β Common UI across different sections
- Layout Restoration β Maintain layout state during navigation
Code Examples
// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
return (
<div className="flex">
<Sidebar />
<main className="flex-1">{children}</main>
</div>
);
}
// Nested layouts
// app/dashboard/settings/layout.js
export default function SettingsLayout({ children }) {
return (
<div>
<SettingsNav />
{children}
</div>
);
}
// Layout groups
// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
return (
<div>
<MarketingHeader />
{children}
<MarketingFooter />
</div>
);
}
// Parallel routes
// app/layout.js
export default function RootLayout({ children, analytics, notifications }) {
return (
<html>
<body>
{children}
{analytics}
{notifications}
</body>
</html>
);
}
Practice
Build a dashboard with nested layouts and parallel route slots.