Layout adalah UI bersama yang membungkus beberapa halaman dan tetap bertahan selama navigasi — tidak akan di-render ulang atau kehilangan status saat Anda berpindah antar rute anak. Anda mendefinisikannya dengan file layout.tsx.
() {
(
);
}
Setiap aplikasi App Router harus memiliki root layout — menggantikan _app.tsx/_document.tsx yang lama.
Layout bersarang mengikuti struktur folder, sehingga setiap bagian dapat menambahkan pembungkus persistennya sendiri:
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>
);
}
Ketika Anda menavigasi dari /dashboard/settings ke /dashboard/billing, layout dashboard (dan <Sidebar>-nya) tetap terpasang — statusnya (posisi scroll, menu terbuka, input formulir) dipertahankan, dan hanya konten halaman yang berubah. Ini lebih efisien dan memberikan UX yang lebih mulus daripada merender ulang seluruh shell.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Gunakan template.tsx sebagai ganti layout.tsx dalam kasus langka ketika Anda ingin pembungkus direset setiap navigasi.
Layout adalah cara App Router membuat model UI bersama dan persisten (header, sidebar, nav) di tingkat mana pun dari pohon rute.
Ketahanan mereka selama navigasi — mempertahankan status dan menghindari render ulang shell — adalah keuntungan inti App Router, dan layout bersarang memungkinkan setiap bagian menyusun strukturnya sendiri dengan bersih.