Next.js › Layouts & Templates
How do nested layouts work when you have layouts defined at multiple levels of your route structure?
IntermediateAnswer
Each folder in your route structure can have its own layout.js file, and Next.js automatically nests them, wrapping the innermost page with its closest layout first, and then wrapping that result with each parent layout going up the folder tree, building the full page piece by piece.
// app/layout.js wraps everything
// app/dashboard/layout.js wraps dashboard pages
// app/dashboard/settings/page.js is the innermost content
export default function RootLayout({ children }) {
return <html><body>{children}</body></html>;
}Real-world example An application has a root layout with a global header, a dashboard layout inside it with a sidebar, and individual pages nested even further inside, creating a clean, organized structure of shared user interface pieces.