Susun atur adalah UI bersama yang membungkus berbagai halaman dan bertahan di seluruh navigasi — ia tidak dirender ulang atau kehilangan status saat Anda berpindah antar rute anak. Anda menentukannya dengan file layout.tsx.
() {
(
);
}
Setiap aplikasi App Router harus memiliki susun atur akar — ia menggantikan _app.tsx/_document.tsx lama.
Susun atur bersarang di sepanjang struktur folder, jadi setiap bagian dapat menambahkan pembungkusnya sendiri yang persisten:
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, susun atur dasbor (dan <Sidebar> miliknya) tetap terpasang — statusnya (posisi gulir, menu terbuka, masukan formulir) dipertahankan, dan hanya konten halaman yang ditukar. 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 alih-alih layout.tsx dalam kesempatan langka Anda ingin pembungkus direset per navigasi.
Susun atur adalah cara App Router memodelkan UI bersama yang persisten (header, sidebar, nav) di tingkat mana pun dari pohon rute.
Kepersistanan mereka di seluruh navigasi — mempertahankan status dan menghindari perender ulang shell — adalah keuntungan inti App Router, dan susun atur bersarang memungkinkan setiap bagian untuk menyusun strukturnya sendiri dengan bersih.