Problem Statement
Explain how nested layouts work in App Router and how they differ from the Pages Router approach.
Explanation
In App Router, layouts are nested hierarchically where each segment can have its own layout.js that wraps its children, and all parent layouts automatically wrap child layouts creating a composed layout system. The root app/layout.js is required and must contain html and body tags wrapping everything, then each nested route segment like app/dashboard/layout.js adds its own wrapper preserved during navigation within that section. This differs from Pages Router's single _app.js and _document.js approach where you had one global wrapper requiring custom logic for per-page layouts, whereas App Router's nested layouts maintain state across navigations, support multiple root layouts through route groups, and enable partial rendering where only the changing segment re-renders. Layouts can fetch data, be Server or Client Components, and colocate related UI without prop drilling through intermediate pages.
Practice Sets
This question appears in the following practice sets: