Un layout est une UI partagée qui enveloppe plusieurs pages et persiste lors de la navigation — elle ne se re-rend pas et ne perd pas son état lorsque vous naviguez entre les routes enfants. Vous en définissez une avec un fichier layout.tsx.
() {
(
);
}
Chaque application App Router doit avoir un layout racine — il remplace l'ancien _app.tsx/_document.tsx.
Les layouts s'imbriquent le long de la structure des dossiers, donc chaque section peut ajouter son propre wrapper persistant :
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>
);
}
Lorsque vous naviguez de /dashboard/settings à /dashboard/billing, le layout du dashboard (et son <Sidebar>) reste monté — son état (position de défilement, menus ouverts, saisies de formulaire) est préservé, et seul le contenu de la page change. C'est plus efficace et offre une meilleure UX qu'un re-rendu de la coque entière.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Utilisez template.tsx au lieu de layout.tsx dans le rare cas où vous voulez que le wrapper se réinitialise par navigation.
Les layouts sont la façon dont l'App Router modélise l'UI partagée et persistante (en-têtes, barres latérales, nav) à n'importe quel niveau de l'arborescence des routes.
Leur persistance lors de la navigation — en préservant l'état et en évitant les re-rendus de la coque — est un avantage central de l'App Router, et les layouts imbriqués permettent à chaque section de composer sa propre structure proprement.