Un layout è un'interfaccia utente condivisa che avvolge più pagine e persiste durante la navigazione — non viene nuovamente renderizzato e non perde lo stato quando ti sposti tra le rotte figlie. Lo definisci con un file layout.tsx.
() {
(
);
}
Ogni app App Router deve avere un layout radice — sostituisce il vecchio _app.tsx/_document.tsx.
I layout si annidano seguendo la struttura delle cartelle, quindi ogni sezione può aggiungere il proprio wrapper persistente:
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>
);
}
Quando navighi da /dashboard/settings a /dashboard/billing, il layout dashboard (e la sua <Sidebar>) rimane montato — il suo stato (posizione di scorrimento, menu aperti, input modulo) viene preservato, e solo il contenuto della pagina cambia. Questo è più efficiente e offre un'esperienza utente più fluida rispetto al re-rendering dell'intera shell.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Usa template.tsx invece di layout.tsx nell'occasione rara in cui desideri che il wrapper si ripristini per ogni navigazione.
I layout sono il modo in cui l'App Router modella l'interfaccia utente condivisa e persistente (intestazioni, barre laterali, navigazione) a qualsiasi livello dell'albero delle rotte.
La loro persistenza durante la navigazione — conservando lo stato ed evitando il re-rendering della shell — è un vantaggio fondamentale dell'App Router, e i layout annidati permettono a ogni sezione di comporre la propria struttura in modo pulito.