Kila programu ya App Router lazima iwe na mpango wa mizizi — inabadilisha _app.tsx/_document.tsx ya zamani.
Mipango inaingiliza kando na muundo wa folda, kwa hivyo kila sehemu inaweza kuongeza mzunguko wake wa kudumu:
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>
);
}
Unapobadilisha kutoka /dashboard/settings hadi /dashboard/billing, mpango wa dashboard (na yake <Sidebar>) inabaki kupigwa — hali yake (nafasi ya kugurudumia, menu zilizofunguliwa, ingizo la fomu) inahifadhiwa, na tu maudhui ya ukurasa yanabadilishwa. Hii ni bora zaidi na inatoa matumizi ya kawaida kuliko kupigia tena ganda lote.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Tumia template.tsx badala ya layout.tsx kwa wakati mwingine mwalimu ungo unataka mzunguko urudi kwa uamsishaji.
Mipango ndio jinsi App Router inayoonyesha UI iliyobanwa, inayobakia (vichwa, sidebar, nav) katika ngazi yoyote ya mti wa njia.
Kubakia kwao kwenye uamsishaji — kuweka hali na kuepuka kupigia tena ganda — ni faida ya App Router, na mipango iliyoingizwa inaruhusu kila sehemu kutunga muundo wake kwa njia safi.