Layout — это общий UI, который оборачивает несколько страниц и сохраняется при навигации — он не перерендеривается и не теряет состояние при переходе между дочерними маршрутами. Вы определяете его с помощью файла layout.tsx.
() {
(
);
}
Каждое приложение App Router должно иметь корневой layout — он заменяет старые _app.tsx/_document.tsx.
Layouts вкладываются вдоль структуры папок, поэтому каждый раздел может добавить собственную постоянную обёртку:
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>
);
}
Когда вы переходите с /dashboard/settings на /dashboard/billing, layout панели управления (и его <Sidebar>) остаётся смонтированным — его состояние (позиция прокрутки, открытые меню, ввод в форме) сохраняется, и только содержимое страницы меняется. Это более эффективно и обеспечивает более гладкий UX, чем перерендеринг всей оболочки.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Используйте template.tsx вместо layout.tsx в редких случаях, когда вы хотите, чтобы обёртка сбрасывалась при каждой навигации.
Layouts — это то, как App Router моделирует общий, постоянный UI (заголовки, боковые панели, навигация) на любом уровне дерева маршрутов.
Их сохранение при навигации — сохранение состояния и избежание перерендеринга оболочки — это ключевое преимущество App Router, и вложенные layouts позволяют каждому разделу чисто компоновать собственную структуру.