Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як формується маршрут в app router?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У **Next.js App Router** маршрут формується виключно структурою тек та спеціальними файлами всередині директорії `app/`: URL - це шлях тек від `app/` до `page.tsx`. **Ключове:** маршрут існує тільки за наявності `page.tsx`, а групи маршрутів і спеціальні файли керують рендерингом, не впливаючи на URL.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ **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.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.