Një paraqitje është UI e ndarë që mbështjell faqe të shumta dhe persiston gjatë navigimit — nuk ri-renderohet ose nuk humbet gjendjen kur lëvizni midis rutave fëmijë. Ju e përcaktoni me një skedar layout.tsx.
() {
(
);
}
Çdo aplikacion App Router duhet të ketë një paraqitje rrënjë — ajo zëvendëson të vjetrin _app.tsx/_document.tsx.
Paraqitjet ndërthurohen përgjatë strukturës së dosjes, kështu që secila seksion mund të shtojë mbështjellësin e vet të qëndrueshëm:
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>
);
}
Kur lundrojnë nga /dashboard/settings në /dashboard/billing, paraqitja e tabeles kontrol (dhe <Sidebar> e saj) mbetet e montuar — gjendja e saj (pozicioni i rrëshqitjes, menytë e hapura, inputi i formularit) është ruajtur, dhe vetëm përmbajtja e faqes ndërrohet. Kjo është më efikase dhe ofron një UX më të qetë se sa ri-renderimi i gjithë guaskës.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Përdorni template.tsx në vend të layout.tsx në rastet e rralla kur dëshironi që mbështjellësi të rivendoset për çdo navigim.
Paraqitjet janë mënyra se si App Router modelon UI të ndarë, të qëndrueshme (kokë, shira anësor, nav) në çdo nivel të pemës së rutave.
Persistenca e tyre gjatë navigimit — ruajtja e gjendjes dhe shmangja e ri-renderimit të guaskës — është një avantazh qendror i App Router, dhe paraqitjet e ndërthurura lejojnë çdo seksion të komponojë strukturën e vet në mënyrë të pastër.