Next.js: Layouts и вложенный routing — ментальная модель

Layouts — shared shells, persist across navigation; nested folders → tree of nested layouts. Sibling routes re-render только page, enclosing layouts mounted со state и scroll.

Разбор

URL — path через tree; каждая folder может дать layout, wrapping всё ниже. Render route = compose layouts root → leaf page:

app/layout        (root — /, always present)
 └─ app/(shop)/layout          → wraps the shop
     └─ app/(shop)/products/layout   → sidebar + filters
         └─ app/(shop)/products/[id]/page   → the actual product

Rendered: RootLayout( ShopLayout( ProductsLayout( ProductPage ) ) ). Navigate product A → B: only innermost page re-renders. Wrapping layouts stay mounted — React state, scroll, <video> keeps playing. Layouts — stable furniture; pages — changing content.

Итог

Nested layouts — killer feature App Router: shell стабилен, контент меняется без remount родителей.