Next.js · App Router · Junior · Concept
How do nested layouts work in the App Router?
Short Interview Answer
Layouts wrap child segments and preserve state across navigations within that subtree.
Detailed Explanation
`layout.tsx` wraps `page.tsx` and nested routes. Root layout is required and typically holds `<html>`/`<body>`. Shared UI (nav, shell) lives in layouts so it does not remount on soft navigation. Soft navigation preserves client state in layouts above the changing segment.
Example
app/dashboard/layout.tsx wraps app/dashboard/page.tsx and app/dashboard/settings/page.tsx