[Next.js](/courses/nextjs) allows layouts to be **nested according to the route hierarchy**. This means different sections of an application can progressively add their own shared UI. ### Example Structure ```text app/ layout.js dashboard/ layout.js page.js users/ page.js ``` When `/dashboard/users` is rendered, the component structure is conceptually: ```jsx ``` ### Root Layout The root layout could contain site-wide UI: ```jsx export default function RootLayout({ children }) { return ( {children} ); } ``` ### Dashboard Layout The nested dashboard layout can add section-specific UI: ```jsx export default function DashboardLayout({ children }) { return (

{children}

); } ``` The final page therefore receives both the global website structure and dashboard-specific structure. ### Deeper Layout Nesting Layouts can be nested further: ```text app/ layout.js dashboard/ layout.js settings/ layout.js profile/ page.js ``` The resulting hierarchy becomes: ```text RootLayout ↓ DashboardLayout ↓ SettingsLayout ↓ ProfilePage ``` ### Why Is This Useful? It lets developers organize shared UI at the most appropriate level. For example: ```text Entire website → Header + Footer Dashboard → Sidebar + Dashboard Header Settings section → Settings Navigation Profile page → Profile Content ``` Each level only needs to know about the UI relevant to that section. ### Interview-Ready Answer Nested layouts follow the [App Router](/courses/nextjs) route hierarchy. A child page can be wrapped by multiple layouts, starting with the closest nested layout and continuing through parent layouts up to the root layout. This lets applications compose shared UI progressively instead of creating one massive global layout.