Un layout este UI-ul partajat care înfășoară mai multe pagini și persista în perioada navigației — nu se re-randează și nu pierde starea când vă deplasați între rute copii. Îl definiți cu un fișier layout.tsx.
() {
(
);
}
Fiecare aplicație App Router trebuie să aibă un layout rădăcinii — înlocuiește vechiul _app.tsx/_document.tsx.
Layouturile se imbrică de-a lungul structurii folderelor, deci fiecare secțiune poate adăuga propria wrapper persistentă:
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>
);
}
Când navigați de la /dashboard/settings la /dashboard/billing, layoutul dashboard-ului (și <Sidebar>-ul acestuia) rămâne montat — starea acestuia (poziția scroll-ului, meniuri deschise, intrări formular) este păstrată, iar doar conținutul paginii se schimbă. Aceasta este mai eficientă și oferă o experiență mai lină decât re-randarea întregului shell.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Folosiți template.tsx în loc de layout.tsx în rara ocazie în care doriți ca wrapper-ul să se reseteze la fiecare navigație.
Layouturile sunt modul în care App Router modelează UI-ul partajat și persistent (anteturi, bare laterale, navigare) la orice nivel al copacului rutelor.
Persistența acestora în perioada navigației — păstrând starea și evitând re-randarea shell-ului — este un avantaj central al App Router-ului, iar layouturile imbricate permit fiecărei secțiuni să-și compună propria structură în mod curat.