Um layout é uma UI compartilhada que envolve múltiplas páginas e persiste na navegação — ela não re-renderiza ou perde estado quando você se move entre rotas filhas. Você define um com um arquivo layout.tsx.
() {
(
);
}
Todo aplicativo App Router deve ter um layout raiz — ele substitui o antigo _app.tsx/_document.tsx.
Layouts se aninham junto à estrutura de pastas, então cada seção pode adicionar seu próprio 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 você navega de /dashboard/settings para /dashboard/billing, o layout do dashboard (e sua <Sidebar>) permanece montado — seu estado (posição de scroll, menus abertos, entrada de formulário) é preservado, e apenas o conteúdo da página muda. Isso é mais eficiente e oferece uma UX mais suave do que re-renderizar o shell inteiro.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Use template.tsx em vez de layout.tsx na rara ocasião em que você quer que o wrapper resete por navegação.
Layouts são como o App Router modela UI compartilhada e persistente (headers, sidebars, nav) em qualquer nível da árvore de rotas.
Sua persistência na navegação — preservando estado e evitando re-renders do shell — é uma vantagem central do App Router, e layouts aninhados permitem que cada seção componha sua própria estrutura de forma limpa.