Nested Layouts
Layouts allow shared UI to persist across navigation. A root layout can contain global HTML structure, while nested layouts can provide section-specific navigation or context.
Imagine an application containing public pages and an admin dashboard. The dashboard can have a nested layout containing its sidebar, while the public layout remains independent.
Layouts are not merely a way to avoid duplicated JSX. They define persistent UI boundaries and can improve the user experience during navigation.
Dashboard Layout
export default function DashboardLayout({
children
}: {
children: React.ReactNode;
}) {
return (
<div className='dashboard'>
<aside>Dashboard Navigation</aside>
<main>{children}</main>
</div>
);
}💡 The dashboard layout wraps all pages nested beneath its directory.
Key Takeaways
- Layouts are shared UI boundaries.
- Nested layouts let different parts of an application have different shells.
- Persistent navigation can live in a layout instead of being recreated in every page.