Layouts wrap child routes and re-render only their {children} slot when navigating between siblings. That persistence is ideal for nav bars, sidebars, and shared context providers that should survive page changes.
Nested layout pattern
// app/layout.tsx — root
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
<div className="dashboard-shell">
<aside>Nav</aside>
<main>{children}</main>
</div>
);
}What persists vs remounts
- Layout component state persists across sibling navigations under the same layout
page.tsxcontent swaps when the URL segment changestemplate.tsxremounts on every navigation (use when you need a fresh effect each visit)
Important interview questions and answers
- Q: Can you nest multiple layouts?
A: Yes—each folder can export a layout; they compose outward from root to leaf. - Q: Where does shared auth UI belong?
A: In a layout wrapping protected segments, or middleware redirecting before render.
Self-check
- Why is a sidebar usually in
layout.tsxnotpage.tsx? - When would you choose
template.tsxover layout?