Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як структура проекту впливає на роутинг у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У **Next.js** роутинг **напряму випливає зі структури папок**. Простіше кажучи: як розклав файли, так і виглядатимуть URL. Жодних конфігів, жодного ручного мапінгу. **Ключове:** кожна папка - це сегмент URL, а `page.tsx` - точка входу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ **Next.js** роутинг **напряму випливає зі структури папок**. Простіше кажучи: *як розклав файли - так і виглядатимуть URL*. Жодних конфігів, жодного ручного мапінгу. ### Базове правило ``` app/ ├─ page.tsx → / ├─ blog/ │ └─ page.tsx → /blog └─ blog/post/ └─ page.tsx → /blog/post ``` **Кожна папка = сегмент URL**, а `page.tsx` - точка входу. --- ## Ключові файли і як вони впливають на роутинг ### `page.tsx` Створює сторінку ``` app/profile/page.tsx → /profile ``` ### `layout.tsx` Обгортка для **всіх дочірніх роутів** ``` app/dashboard/layout.tsx app/dashboard/page.tsx app/dashboard/users/page.tsx ``` `layout` буде застосований до: - `/dashboard` - `/dashboard/users` --- ### `not-found.tsx` 404 **для конкретної гілки** ``` app/blog/not-found.tsx ``` Спрацює тільки всередині `/blog/*` --- ### `loading.tsx` Автоматичний skeleton / loader Відображається **поки завантажується сегмент** --- ## Динамічні маршрути ### `[id]` ``` app/users/[id]/page.tsx ``` URL: - `/users/1` - `/users/42` ```ts export default function Page({ params }) { return <div>User {params.id}</div> } ``` --- ### `[[...slug]]` - optional catch-all ``` app/docs/[[...slug]]/page.tsx ``` Працює для: - `/docs` - `/docs/react` - `/docs/react/hooks` --- ## Route Groups `(group)` **Не впливає на URL**, тільки на організацію ``` app/ ├─ (auth)/ │ ├─ login/page.tsx → /login │ └─ register/page.tsx → /register └─ (main)/ └─ page.tsx → / ``` Ідеально для: - auth-зон - admin / public - логічного розділення проекту ## Часті помилки - Поклав компонент у `app/` → **став роутом** - Немає `page.tsx` → **роута немає** - Спільні компоненти всередині `app/` → **зайві маршрути** Спільні компоненти тримай у `/components`, `/shared`, `/features` тощоДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.