Next.js: Parallel и intercepting routes — ментальная модель

Question

Accepted Answer

**Parallel routes** (`@slot`) рендерят несколько «страниц» в одном layout одновременно. **Intercepting routes** (`(.)`, `(..)`) перехватывают навигацию и показывают route в текущем layout — классика «модалка при клике, полная страница при refresh».

## Разбор

Обычный routing — одна page в одну `children` дырку. Эти фичи ломают предположение «один URL → один slot».

**Parallel routes** дают layout несколько отверстий. Папка с префиксом `@` — **named slot**, prop рядом с `children`:

```
app/dashboard/
├─ layout.tsx        → receives { children, team, analytics }
├─ page.tsx          → the `children` slot
├─ @team/page.tsx    → the `team` slot
└─ @analytics/page.tsx → the `analytics` slot
```

Слоты рендерятся **параллельно и независимо** — у каждого свой `loading.tsx` и `error.tsx`.

**Intercepting routes** отвечают: «можно показать контент route B, не покидая layout?» Маркеры `(.)`, `(..)`, `(...)` — «совпади с route, но отрисуй здесь» — как относительные импорты (`(.)` тот же уровень, `(..)` на уровень выше).

## Итог

Комбинация `@slots` + intercepting = modal-on-navigate, full-page-on-hard-load — ключевой UX-паттерн App Router.