Layout hija UI li ttkabbel li tħoll fuq paġni multipli u tibqa' għal madwar in-navigazzjoni — ma tirrix mill-ġdid u ma tqisrix l-istat meta timxi bejn ir-roti ta' werqat. Inti tiddefinixen waħda b'fajl layout.tsx.
() {
(
);
}
Kull app App Router ghandu jkollu layout tal-għerq — jibdel l-antiki _app.tsx/_document.tsx.
Layouts nested tul l-istruttura tal-folder, għalhekk kull sezzjoni tista' iżżid il-wrapper perpetwu tagħha stess:
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>
);
}
Meta timxi minn /dashboard/settings għal /dashboard/billing, il-layout tal-dashboard (u l-<Sidebar> tiegħu) jibqa' immontat — l-istat tiegħu (pożizzjoni tal-iskroll, menus miftuħa, input tal-forma) jiġi ppreservat, u biss il-kontenut tal-paġna jitbiddel. Din hija aktar effiċjenti u tagħti user experience aktar smooth milli terrix mill-ġdid il-coquille kollha.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Uża template.tsx minflok layout.tsx fl-occasjoni rara li inti trid il-wrapper jireggista għal kull navigazzjoni.
Layouts huma l-mod kif App Router jimmudellu UI li ttkabbel u perpetwu (headers, sidebars, nav) għal kwalunkwe livell tal-tree tar-rote.
Il-persistenza tagħhom madwar in-navigazzjoni — li jippreservaw l-istat u jevitaw ir-rendering mill-ġdid tal-coquille — hija vantaġġ essenzjali tal-App Router, u nested layouts iħallu lil kull sezzjoni tikkomponi l-istruttura tagħha stess b'mod ċar.
Librerija ta' mistoqsijiet ta' intervisti tal-IT b'tweġibiet dettaljati — minn Junior sa Senior.
Iddona