Düzen, birden fazla sayfayı saran ve navigasyon sırasında kalıcı olan paylaşılan bir UI'dir — alt rotalar arasında hareket ettiğinizde yeniden oluşturulmaz veya durumunu kaybetmez. Bunu layout.tsx dosyasıyla tanımlarsınız.
() {
(
);
}
Her App Router uygulamasının bir kök düzeni olması gerekir — eski _app.tsx/_document.tsx yerine geçer.
Düzenler klasör yapısı boyunca iç içe geçer, bu nedenle her bölüm kendi kalıcı sarıcısını ekleyebilir:
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>
);
}
/dashboard/settings adresinden /dashboard/billing adresine gezintiyi değiştirdiğinizde, dashboard düzeni (ve <Sidebar> öğesi) monte edilmiş kalır — durumu (kaydırma konumu, açık menüler, form girdisi) korunur ve yalnızca sayfa içeriği değişir. Bu, tüm kabuğu yeniden oluşturmaktan daha verimli ve daha pürüzsüz bir UX sağlar.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Sarıcının her navigasyonda sıfırlanmasını istediğiniz nadir durumlarda layout.tsx yerine template.tsx kullanın.
Düzenler, App Router'ın rota ağacının herhangi bir seviyesinde paylaşılan, kalıcı UI'ı (başlıklar, yan çubuklar, nav) nasıl modellediğidir.
Navigasyon sırasında kalıcılıkları — durumu korumak ve kabuğu yeniden oluşturmaktan kaçınmak — App Router'ın temel bir avantajı ve iç içe düzenler her bölümün kendi yapısını temiz bir şekilde oluşturmasına izin verir.