Un layout es una interfaz de usuario compartida que envuelve múltiples páginas y persiste durante la navegación — no se re-renderiza ni pierde estado cuando te desplazas entre rutas secundarias. Lo defines con un archivo layout.tsx.
() {
(
);
}
Cada aplicación de App Router debe tener un layout raíz — reemplaza el antiguo _app.tsx/_document.tsx.
Los layouts se anidan a lo largo de la estructura de carpetas, por lo que cada sección puede agregar su propio envoltorio 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>
);
}
Cuando navegas desde /dashboard/settings a /dashboard/billing, el layout del dashboard (y su <Sidebar>) permanece montado — su estado (posición de desplazamiento, menús abiertos, entrada de formulario) se conserva, y solo se cambia el contenido de la página. Esto es más eficiente y proporciona una experiencia de usuario más fluida que re-renderizar todo el shell.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Usa template.tsx en lugar de layout.tsx en la rara ocasión en que quieras que el envoltorio se reinicie en cada navegación.
Los layouts son cómo el App Router modela la interfaz de usuario compartida y persistente (encabezados, barras laterales, navegación) en cualquier nivel del árbol de rutas.
Su persistencia durante la navegación — conservar el estado y evitar re-renderizar el shell — es una ventaja central del App Router, y los layouts anidados permiten que cada sección componga su propia estructura de forma limpia.