Hver App Router-app må ha en root layout — den erstatter den gamle _app.tsx/_document.tsx.
Layouts nestes langs mappestrukturen, så hver seksjon kan legge til sin egen vedvarende wrapper:
app/layout.tsx → wraps everything (header/footer)
app/dashboard/layout.tsx → wraps all /dashboard/* pages (adds a sidebar)
app/dashboard/settings/page.tsx → rendered inside BOTH layouts
// app/dashboard/layout.tsx — only wraps dashboard routes
export default function DashboardLayout({ children }) {
return (
<div className="flex">
<Sidebar /> {/* stays mounted as you move within /dashboard */}
<main>{children}</main>
</div>
);
}
Når du navigerer fra /dashboard/settings til /dashboard/billing, forblir dashboard-layouten (og dens <Sidebar>) montert — tilstanden (rulleposisjon, åpne menyer, skjemainput) er bevart, og kun sideinnholdet byttes. Dette er mer effektivt og gir en jevnere brukeropplevelse enn å gjenrendre hele skallet.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Bruk template.tsx i stedet for layout.tsx i de sjeldne tilfellene hvor du ønsker at wrapperen skal nullstilles ved navigasjon.
Layouts er hvordan App Router modellerer delt, vedvarende UI (headere, sidestolper, nav) på hvilket som helst nivå i ruttreet.
Deres vedvarenhet under navigasjon — som bevarer tilstand og unngår gjenrendringer av skallet — er en kjerneforbedring i App Router, og nestede layouts lar hver seksjon komponere sin egen struktur på en ren måte.