layout shine UI da aka faɗi da ake lullubuwa da shafuka masu yawa kuma yana ci gaba a waje da safarar waje — ba ya tare gida kuma ba ya rasa yanayin sa lokacin da kuke tafiya tsakanin gajerun hanyoyi. Kuna bayyana ɗaya tare da fayil layout.tsx.
() {
(
);
}
Kowace aikin App Router dole ne ya kasance da jerin tushe — yana maye gurbin tsohuwar _app.tsx/_document.tsx.
Layouts suna hamuwa tare da tsari na foda, don haka kowane sashe na iya saka ninka jerin nasa na tattalin asa:
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>
);
}
Lokacin da kuke tafiya daga /dashboard/settings zuwa /dashboard/billing, jerin dashboard (da kuma <Sidebar>) ya ci gaba a haɗe — yayin sa (matsayin juye, buɗewar menu, saka faɗi) ana kiyaye, kuma fayil kaɗai shine abin da ake canza. Wannan ya ƙama kuma yana ba da laɓɗa na ƙira fiye da yin jiya kaɗai na kwata.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Ayi template.tsx a maimakon layout.tsx a waje da halaye inda kake so jerin ya sake saita kowace safari.
Layouts sune hanyar da App Router ke gwada UI da aka faɗi, tattalin asa (kan bangare, sideba, nav) a kowane matsayi na bishiyar hanya.
Zaman su tare da safarar waje — kiyaye yanayin kuma gutsikar jiya kaɗai na kwata — shine babbar letantacciyar App Router, kuma jerin da aka hamuwa suna ba da yamni ga kowane sashe na haɗa ninka tsari na kanta a aure.