En layout är ett delat UI som omsluter flera sidor och kvarstår under navigering — den renderas inte om eller förlorar tillstånd när du navigerar mellan underordnade rutter. Du definierar en med en layout.tsx-fil.
() {
(
);
}
Varje App Router-app måste ha en root layout — den ersätter det gamla _app.tsx/_document.tsx.
Layouter kapslas enligt mappstrukturen, så varje sektion kan lägga till sin egen beständiga 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 navigerar från /dashboard/settings till /dashboard/billing, dashboard layout (och dess <Sidebar>) förblir monterad — dess tillstånd (rullningsposition, öppna menyer, forminmatning) bevaras, och endast sidinnehållet byts. Detta är mer effektivt och ger en smidigare användarupplevelse än att rendera om hela skalet.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Använd template.tsx istället för layout.tsx i de sällsynta fall då du vill att wrappern nollställs per navigering.
Layouter är hur App Router modellerar delat, beständigt UI (headers, sidebars, nav) på alla nivåer av rutträdet.
Deras persistens under navigering — bevarande av tillstånd och undvikande av omrendering av skalet — är en central App Router-fördel, och kapslade layouter låter varje sektion komponera sin egen struktur på ett rent sätt.