Layout je zajednički UI koji omota više stranica i ostaje trajno tijekom navigacije — ne re-render se i ne gubi svoje stanje kada se krećete između podredenih ruta. Definirate ga s datotekom layout.tsx.
() {
(
);
}
Svaka App Router aplikacija mora imati root layout — zamjenjuje stari _app.tsx/_document.tsx.
Layouti se ugniježđuju duž strukture mape, pa svaki dio može dodati vlastiti trajni 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>
);
}
Kada se krećete s /dashboard/settings na /dashboard/billing, dashboard layout (i njegov <Sidebar>) ostaje montiran — его stanje (pozicija pomicanja, otvoreni izbornici, unos u obrascu) se čuva, a samo se sadržaj stranice mijenja. To je učinkovitije i omogućuje bolji UX nego ponovno renderiranje cijele ljuske.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Upotrijebite template.tsx umjesto layout.tsx u rijetkim slučajevima kada želite da se wrapper resetira pri svakoj navigaciji.
Layouti su način na koji App Router modelira zajedničke, trajne UI elemente (zaglavlja, bočne trake, navigacija) na bilo kojoj razini stabla ruta.
Njihova trajnost tijekom navigacije — čuvanje stanja i izbjegavanje ponovno renderiranja ljuske — je glavna prednost App Routera, a ugniježđeni layouti omogućuju svakom dijelu da čisto sastavlja vlastitu strukturu.