Is é layout ná UI roinnte a bhíonn timpeall ar go leor leathanaigh agus leanann sé ar aghaidh i rith na nascleanúna — ní dhéanann sé athrenderáil agus ní chailleann sé a staid nuair a bhíonn tú ag bogadh idir bealaí páiste. Sainmhíníonn tú ceann amháin le comhad layout.tsx.
() {
(
);
}
Caithfidh layout fréimhe a bheith ag gach aip App Router — cuireann sé an sean-_app.tsx/_document.tsx in ionad.
Bíonn layouts foluain de réir struchtúr an fhillteáin, mar sin is féidir le gach cuid a bheith ag cur a bhreis-wrapper seasmhach air féin:
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>
);
}
Nuair a bhíonn tú ag nascleanúint ó /dashboard/settings go /dashboard/billing, an layout an dashboard (agus a <Sidebar>) fan foluain — a staid (suíomh scrolling, roghanna oscailte, iontráil fhoirm) caomhnúil, agus ní amháin an t-ábhar an leathanaigh a bhíonn ag athrú. Tá sé níos éifeachtúla agus tugann sé UX níos réidhe ná athrenderáil an bhlaoise iomlán.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Baineann úsáid as template.tsx in ionad layout.tsx sa chás annamh go bhfuil tú ag iarraidh go n-athshuítear an wrapper in aghaidh an nascleanúna.
Is iad na layouts an bealach a bhíonn san App Router ag samhaltú UI roinnte, seasmhach (ceannlínte, barra taobh, nav) ag aon leibhéal den chrann bealaigh.
A bhith foluain ar fud an nascleanúna — ag caomhnú an staid agus ag seachaint athrenderálacha den bhlaoise — is é seo cion App Router a bhunus, agus leiceann na layouts foluain do gach cuid a bheith ag ullmhú a struchtúr féin go geal.