A layout iku UI sing dikumbakake sing bungkus karo kalorosang kaca lan tetep ana ing sabranyane navigasi — ora dirender maneh lan ora ilang kondhisine nalika pindah antarane rute anak. Sampeyan nggawe siji nganggo file layout.tsx.
() {
(
);
}
Saben App Router app kudu duwe layout akar — iku ngganti _app.tsx/_document.tsx kang lawas.
Layout nduwur-nduwuri struktur folder, mula saben bagian bisa nambah wrapper sing tetep dhewe:
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>
);
}
Yen sampeyan mlayu saka /dashboard/settings mung /dashboard/billing, dashboard layout (lan <Sidebar> ne) tetep ing kenehan — kondhisine (posisi gulung, menu kang mbukak, input formulir) dijaga, lan mung isi kaca kang ganti. Iki luwih apik lan menehi pengalaman pengguna kang luwih alon tinimbang render maneh sak kabeh.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Gunakake template.tsx tinimbang layout.tsx ing kesempatan kang arang amene sampeyan pengin wrapper mula mulai maneh saben navigasi.
Layout yaiku carane App Router nggawe model UI kang dikumbakake lan tetep (judul, sidebar, navigasi) ing tingkat nambang saka rute pohon.
Tetepane ing sabranyane navigasi — njaga kondhisine lan nglakokake render maneh sak kabeh — yaiku kauntungan inti App Router, lan layout kang ana ing jaba bisa karo saben bagian nggawe struktur dhewe kanthi bersih.