Maketai yra bendrinti UI, kuris apima kelis puslapius ir lieka nuolatinis per naršymą — jis iš naujo neperrendetuojamas ir nepraranda būsenos perkeliant į vaikinius maršrutus. Jūs jį apibrėžiate su layout.tsx failu.
() {
(
);
}
Kiekviena App Router programa turi turėti pagrindinį maketą — jis pakeičia seną _app.tsx/_document.tsx.
Maketai suskirstyti pagal aplanko struktūrą, todėl kiekvienas skyrius gali pridėti savo nuolatinį įdėklą:
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>
);
}
Kai pereisite nuo /dashboard/settings prie /dashboard/billing, prietaisų skydelio maketai (ir jo <Sidebar>) lieka prijungti — jo būsena (slinkties padėtis, atidaryti meniu, formos įvestis) yra išsaugota, ir tik puslapio turinys keičiasi. Tai efektyviau ir suteikia sklandesnę UX nei iš naujo perrendetuoti visą apvalkalą.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Naudokite template.tsx vietoje layout.tsx retais atvejais, kai norite, kad apvalkalas iš naujo nustatyti per naršymą.
Maketai yra būdas, kuriuo App Router modeliuoja bendrinti, nuolatinį UI (antraštes, šoninius stulpelius, naršymą) bet kuriame maršruto medžio lygyje.
Jų nuolatiškumas per naršymą — būsenos išsaugojimas ir apvalkalo iš naujo perrendetuojimo išvengimas — yra pagrindinė App Router nauda, o suporjoti maketai leidžia kiekvienam skyriui grynai sudaryti savo struktūrą.