Nested Layouts
Build multi-level UI — like a shared header plus a section-specific sidebar — using nested layout.tsx files.
How Nesting Works
Every folder level can define its own layout.tsx. Next.js wraps each layout around the ones below it, from the root layout down to the final page, forming a nested chain of components.
Example: Dashboard with Sub-sections
app/├── layout.tsx → wraps the whole app└── dashboard/ ├── layout.tsx → adds a sidebar, wraps everything below ├── page.tsx → /dashboard ├── analytics/ │ ├── layout.tsx → adds a sub-nav, wraps analytics pages │ └── page.tsx → /dashboard/analytics └── settings/ └── page.tsx → /dashboard/settingsVisiting /dashboard/analytics renders: root layout → dashboard layout (sidebar) → analytics layout (sub-nav) → the analytics page — each nested inside the one before it.
Rendering Order
Navigating from /dashboard/analytics to /dashboard/settings keeps the root layout and dashboard layout mounted exactly as they were — only the part of the tree that actually changed re-renders.
FAQs
No hard limit — but keep nesting to what genuinely needs shared UI at each level, to avoid an overly deep component tree.
Not directly by overriding props — each layout is responsible only for the UI it renders around its own children.
Summary
Nested layouts let you build shared UI incrementally, level by level, without repeating markup on every page. Next, you'll learn how route groups let you organize routes without affecting the URL.