Next.js: Основы App Router — ментальная модель

Question

Accepted Answer

App Router — file-system router на React Server Components: папки = URL segments, special files (`page`, `layout`, `loading`, `error`) — контракт, всё server by default до `'use client'`.

## Разбор

Route — **дерево nested layouts**, resolve на сервере в stream React. Folder path = URL; files внутри — что segment вносит:

```
app/
├─ layout.tsx          → root layout (wraps everything, must render /)
├─ page.tsx            → "/"
├─ loading.tsx         → Suspense fallback for this segment
├─ error.tsx           → error boundary (must be 'use client')
└─ dashboard/
   ├─ layout.tsx       → wraps every dashboard route, PRESERVED across navigation
   └─ page.tsx         → "/dashboard"
```

Только `page.tsx` (и `route.ts`) делают segment публично routable. Папка только с `layout.tsx` — structure, не URL.

Killer property: **layouts persist across navigations** — `/dashboard/a` → `/dashboard/b` re-render page, dashboard layout (state, scroll, DOM) остаётся mounted.

## Итог

App Router = nested layouts + RSC-by-default + file conventions; layouts — стабильная оболочка, pages — меняющийся контент.