Layout to wspólny interfejs użytkownika, który otacza wiele stron i utrzymuje się podczas nawigacji — nie ulegnie ponownemu renderowaniu ani nie straci stanu podczas przechodzenia między trasami podrzędnymi. Definiujesz go za pomocą pliku layout.tsx.
() {
(
);
}
Każda aplikacja App Router musi mieć główny layout — zastępuje stary _app.tsx/_document.tsx.
Layouty zagnieżdżają się wzdłuż struktury folderów, więc każda sekcja może dodać własny trwały 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>
);
}
Kiedy przechodzisz z /dashboard/settings do /dashboard/billing, layout pulpitu nawigacyjnego (i jego <Sidebar>) pozostaje zamontowany — jego stan (pozycja przewijania, otwarte menu, dane formularza) jest zachowany, a tylko zawartość strony się zmienia. Jest to bardziej wydajne i zapewnia płynniejszy UX niż ponowne renderowanie całej powłoki.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Zamiast layout.tsx użyj template.tsx w rzadkiej sytuacji, gdy chcesz, aby wrapper resetował się podczas nawigacji.
Layouty to sposób, w jaki App Router modeluje wspólny, trwały interfejs użytkownika (nagłówki, paski boczne, nawigacja) na dowolnym poziomie drzewa tras.
Ich trwałość podczas nawigacji — zachowanie stanu i unikanie ponownych renderowań powłoki — jest kluczową zaletą App Router, a zagnieżdżone layouty pozwalają każdej sekcji czysto komponować własną strukturę.