Een layout is gedeelde UI die meerdere pagina's omwikkelt en blijft behouden tijdens navigatie — deze wordt niet opnieuw weergegeven en verliest geen state wanneer je tussen onderliggende routes beweegt. Je definieert deze met een layout.tsx bestand.
() {
(
);
}
Elke App Router-app moet een root layout hebben — deze vervangt de oude _app.tsx/_document.tsx.
Layouts nesten langs de mappenstructuur, dus elke sectie kan zijn eigen persistente wrapper toevoegen:
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>
);
}
Wanneer je navigeert van /dashboard/settings naar /dashboard/billing, blijft de dashboard layout (en de <Sidebar>) gemount — de state ervan (scrollpositie, openstaande menu's, formulierinvoer) wordt behouden, en alleen de pagina-inhoud wordt omgewisseld. Dit is efficiënter en geeft een vloeiendere UX dan het opnieuw weergeven van de hele shell.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Gebruik template.tsx in plaats van layout.tsx in het zeldzame geval dat je wilt dat de wrapper per navigatie opnieuw wordt ingesteld.
Layouts zijn hoe de App Router gedeelde, persistente UI (headers, sidebars, nav) op elk niveau van de routeboom modelleert.
Hun persistentie tijdens navigatie — het behouden van state en het voorkomen van herweergaven van de shell — is een voordeel van de App Router, en geneste layouts laten elke sectie zijn eigen structuur schoon samenstellen.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren