Et layout er delt brugergrænseflade, som omgiver flere sider og vedvarer under navigation — det gengives ikke igen eller mister tilstand, når du navigerer mellem underordnede ruter. Du definerer det med en layout.tsx fil.
() {
(
);
}
Hver App Router-app skal have et root layout — det erstatter det gamle _app.tsx/_document.tsx.
Layouts indlejres langs mappestrukturen, så hver sektion kan tilføje 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, forbliver dashboard-layoutet (og dets <Sidebar>) monteret — dets tilstand (scroll-position, åbne menuer, formularinput) bevares, og kun sideindholdet skiftes. Dette er mere effektivt og giver en glattere brugeroplevelse end at gengive hele skal.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Brug template.tsx i stedet for layout.tsx i de sjældne tilfælde, hvor du vil have, at wrapperen nulstilles ved hver navigation.
Layouts er, hvordan App Router modellerer delt, vedvarende brugergrænseflade (overskrifter, sidebars, nav) på ethvert niveau af ruttetræet.
Deres vedholdenhed under navigation — bevarelse af tilstand og undgåelse af gengengivelse af skallen — er en kernefordel ved App Router, og indlejrede layouts lader hver sektion komponere sin egen struktur rent.