A layout egy megosztott UI, amely több oldalt burkol és navigáció során megmarad — nem renderelődik újra és nem veszíti el az állapotát, amikor a gyermekútvonalak között mozog. Egy layout.tsx fájllal definiálja.
() {
(
);
}
Minden App Router alkalmazásnak rendelkeznie kell egy root layouttal — helyettesíti a régi _app.tsx/_document.tsx fájlokat.
A layoutok a mappastruktúra mentén beágyazódnak, így az egyes szakaszok hozzáadhatják a saját állandó burkolataikat:
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>
);
}
Ha a /dashboard/settings oldal helyéről a /dashboard/billing oldalra navigál, a dashboard layout (és annak <Sidebar>) csatlakoztatva marad — az állapota (görgetési pozíció, nyitott menük, űrlapbevitel) megmarad, és csak az oldalak tartalma cserélfödik. Ez hatékonyabb, mint a teljes héj újrarenderelése, és simább felhasználói élményt biztosít.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Használjon template.tsx helyett layout.tsx alkalmazzon ritkán, amikor azt szeretné, hogy a burkolat minden navigáció során alaphelyzetbe álljon.
A layoutok az a módja, ahogyan az App Router megosztott, állandó felhasználói felületi elemeket (fejléceket, oldalsávokat, navigációt) modellez az útvonalfa bármely szintjén.
A navigáció során való állékonyságuk — az állapot megőrzése és a héj újrarenderelésének elkerülése — az App Router alapvető előnye, és a beágyazott layoutok lehetővé teszik az egyes szakaszok számára, hogy tisztán összeállítsák a saját struktúrájukat.