Як формується маршрут в app router?

Next.jsMiddle~1 хв читання

У Next.js App Router маршрут формується виключно структурою тек та спеціальними файлами всередині директорії app/.

Ключова ідея:

URL = шлях тек від app/ до page.tsx

Базове правило

Кожен маршрут - це тека, в якій є файл:

page.tsx

Приклад:

txt

app/page.tsx            → /
app/blog/page.tsx       → /blog
app/blog/post/page.tsx  → /blog/post

Що враховується при формуванні маршруту

1. Теки

Кожна тека додає сегмент URL:

txt

app/products/shoes/page.tsx → /products/shoes

2. `page.tsx`

обов'язковий файл для маршруту
саме він формує сторінку
без нього тека не є маршрутом

3. Динамічні сегменти

Використовуються квадратні дужки:

txt

app/blog/[slug]/page.tsx → /blog/anything

[slug] → параметр маршруту
доступний на сервері й клієнті

4. Catch-all сегменти

txt

app/docs/[...slug]/page.tsx

URL:

/docs/a
/docs/a/b/c

5. Optional catch-all

txt

app/docs/[[...slug]]/page.tsx

URL:

/docs
/docs/a
/docs/a/b

6. Route Groups (не впливають на URL)

txt

app/(auth)/login/page.tsx → /login

тека в ()
використовується тільки для структури
в URL не потрапляє

7. `layout.tsx`

не додає сегмент URL
задає спільний каркас
успадковується вкладеними маршрутами

8. Спеціальні файли

Вони не впливають на URL, але беруть участь у рендері:

Файл	Призначення
`layout.tsx`	Спільний layout
`loading.tsx`	Suspense loading
`error.tsx`	Error boundary
`not-found.tsx`	404
`template.tsx`	Скидання стану

Приклад складного маршруту

txt

app/
 ├─ (marketing)/
 │   └─ blog/
 │      └─ [slug]/
 │         ├─ page.tsx
 │         └─ layout.tsx
 └─ (auth)/
     └─ login/
        └─ page.tsx

Результат:

/blog/my-post
/login

Часта помилка

Думати, що тека без page.tsx - це маршрут Маршрут існує тільки за наявності page.tsx

Коротка відповідь для співбесіди

В App Router маршрут формується на основі шляху тек від app/ до page.tsx, з підтримкою динамічних сегментів, груп маршрутів і спеціальних файлів, які керують рендерингом, але не впливають на URL.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.