How do nested layouts work in the App Router?

WHAT THIS TESTS: This question tests whether you understand the App Router file-system-based component hierarchy and how React state boundaries interact with routing. Interviewers want to see that you know layouts are not pages, that nested layouts compose parent to child, and that the framework uses partial rendering so only the changed segment rerenders. It also checks if you confuse the App Router model with the Pages Router app component pattern.

A GOOD ANSWER COVERS: First, the rendering hierarchy mirrors the folder structure. The root layout at app/layout.js is the outermost shell. When you hit /dashboard/settings, the dashboard layout at app/dashboard/layout.js is rendered as a child of the root layout, and the settings page at app/dashboard/settings/page.js is rendered as a child of the dashboard layout. Second, the dashboard layout acts as a persistent shell for everything under it. When you navigate from /dashboard/settings to /dashboard/profile, the settings page unmounts and the profile page mounts, but the dashboard layout stays mounted and preserves its local React state and DOM. Third, this works because Next.js treats each layout as a boundary that survives navigation within its subtree. Fourth, data fetching in the layout does not automatically rerun on child navigation unless revalidation or cache invalidation is triggered, so UI state like scroll position, form inputs, or open modals in the sidebar remain intact.

COMMON WRONG ANSWERS: A major red flag is saying that every layout remounts on navigation, which implies you think the entire page tree is destroyed and rebuilt. Another is describing the Pages Router behavior where the app component wraps everything globally and you would use getLayout to approximate nested layouts. Candidates also sometimes claim that parallel routes or route groups are required for this behavior, which is incorrect. Finally, stating that layout state is preserved via some Next.js-specific state management API rather than standard React component persistence shows a fundamental misunderstanding.

LIKELY FOLLOW-UPS: The interviewer might ask what happens if you add a template.js in the dashboard folder instead of layout.js, which would cause remounts on navigation. They might ask how loading.js boundaries interact, or whether a server component layout can hold client state. They could also ask about the implications for fetching in layouts versus pages, or how to opt out of persistence if you need a fresh mount.

ONE CONCRETE EXAMPLE: Imagine the dashboard layout has a sidebar with an accordion menu tracking its open panels in useState. When the user clicks from Settings to Billing under /dashboard, the sidebar accordion stays exactly as it was because the dashboard layout never unmounted. If the interviewer asks how to reset that state, you would mention using a template.js file or keying the layout based on a dynamic segment when appropriate.