Postavitev je deljena vmesnika, ki ovija več strani in se ohrani pri navigaciji — se ne ponovno izriše in ne izgubi stanja, ko se premikate med otrokoma potmi. Definirate jo s datoteko layout.tsx.
() {
(
);
}
Vsaka aplikacija App Routerja mora imeti korensko postavitev — nadomešča stari _app.tsx/_document.tsx.
Postavitve se gnezdijo po strukturi mape, zato lahko vsak odsek doda svojo lastno trajno ovijačo:
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>
);
}
Ko se pomikate od /dashboard/settings do /dashboard/billing, je postavitev nadzorne plošče (in njene <Sidebar>) ostaja nameščena — njeno stanje (položaj pomika, odprti meniji, vnos v obrazcu) je ohranjeno, in samo vsebina strani se zamenja. To je učinkoviteje in daje bolj tekoč uporabniški doživljaj kot ponovno risanje celotne lupine.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Uporabite template.tsx namesto layout.tsx v redkih primerih, ko želite, da se ovijačka ponastavi pri navigaciji.
Postavitve so način, na katerega model App Routerja modelira deljeno, trajno vmesnika (glave, stranske plošče, navigacija) na kateri koli ravni drevesa poti.
Njihova vztrajnost pri navigaciji — ohranjanje stanja in izogibanje ponovnemu risanju lupine — je glavna prednost App Routerja, in ugneždene postavitve omogočajo, da vsak odsek čisto sestavi svojo strukturo.