Ein Layout ist eine gemeinsame Benutzeroberfläche, die mehrere Seiten umhüllt und über die Navigation hinweg bestehen bleibt — es wird nicht neu gerendert oder verliert seinen Zustand, wenn du zwischen untergeordneten Routen wechselst. Du definierst es mit einer layout.tsx Datei.
() {
(
);
}
Jede App Router-App muss ein Root-Layout haben — es ersetzt die alte _app.tsx/_document.tsx.
Layouts verschachteln sich entlang der Ordnerstruktur, sodass jeder Bereich seinen eigenen persistenten Wrapper hinzufügen kann:
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>
);
}
Wenn du von /dashboard/settings zu /dashboard/billing navigierst, bleibt das Dashboard-Layout (und seine <Sidebar>) eingehängt — sein Zustand (Scroll-Position, offene Menüs, Formulareingaben) bleibt erhalten, und nur der Seiteninhalt wird ausgetauscht. Das ist effizienter und bietet ein besseres Nutzungserlebnis als das erneute Rendern der gesamten Shell.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Verwende template.tsx statt layout.tsx in den seltenen Fällen, in denen du möchtest, dass der Wrapper bei jeder Navigation zurückgesetzt wird.
Layouts sind die Art und Weise, wie der App Router gemeinsame, persistente Benutzeroberfläche (Header, Sidebars, Nav) auf jeder Ebene des Route-Baums modelliert.
Ihre Persistenz über die Navigation — Zustandserhaltung und Vermeidung von Re-Rendering der Shell — ist ein Kernvorteil des App Router, und verschachtelte Layouts ermöglichen es jedem Bereich, seine eigene Struktur sauber zu komponieren.