Rozložení je sdílené uživatelské rozhraní, které obaluje více stránek a přetrvává během navigace — při přechodu mezi podřazenými trasami se nebude znovu vykreslovat ani ztrácet stav. Definujete jej pomocí souboru layout.tsx.
() {
(
);
}
Každá aplikace App Router musí mít kořenové rozložení — nahrazuje staré _app.tsx/_document.tsx.
Rozložení se vnořují podle struktury složek, takže každá sekce může přidat vlastní trvalou obálku:
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>
);
}
Když navigujete z /dashboard/settings na /dashboard/billing, rozložení dashboardu (a jeho <Sidebar>) zůstává připojeno — jeho stav (pozice posuvníku, otevřená nabídka, vstup formuláře) je zachován a pouze se změní obsah stránky. To je efektivnější a poskytuje hladší uživatelský zážitek než opětovné vykreslení celého obalu.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Využívejte template.tsx místo layout.tsx v ojedinělých případech, kdy chcete, aby se obálka resetovala při každé navigaci.
Rozložení jsou způsob, jak App Router modeluje sdílené, trvalé uživatelské rozhraní (záhlaví, postranní panely, navigace) na kterékoli úrovni stromu tras.
Jejich perzistence během navigace — zachování stavu a zabránění opětovnému vykreslení obalu — je základní výhoda App Routeru a vnořená rozložení umožňují každé sekci čistě vytvořit vlastní strukturu.
Knihovna IT otázek k pohovoru s podrobnými odpověďmi — od Junior po Senior.
Přispět