Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке сегменти маршруту в Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У **Next.js** **сегменти маршруту** - це **частини URL**, які відповідають **папкам у** `app/` і формують шлях сторінки. **Ключове:** сегменти можуть бути статичними, динамічними, catch-all або службовими і використовуються для формування URL, layout'ів і логіки рендерингу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ **Next.js** **сегменти маршруту** - це **частини URL**, які відповідають **папкам у** `app/` і формують шлях сторінки. Простіше: > **Кожна папка = один сегмент URL** --- ## Базове поняття URL: ```txt /products/shoes/nike ``` Сегменти: ```txt products → shoes → nike ``` Їх джерело: ```txt app/products/shoes/nike/page.tsx ``` --- ## Види сегментів маршруту ### 1. Статичні сегменти Звичайні папки: ```txt app/about/page.tsx → /about ``` - завжди один і той самий URL - найпростіший тип --- ### 2. Динамічні сегменти Папки в квадратних дужках: ```txt app/blog/[slug]/page.tsx → /blog/my-post ``` - `[slug]` - параметр маршруту - значення приходять з URL --- ### 3. Catch-all сегменти Ловлять кілька сегментів: ```txt app/docs/[...slug]/page.tsx ``` URL: - `/docs/a` - `/docs/a/b/c` --- ### 4. Optional catch-all сегменти Сегменти можуть бути відсутні: ```txt app/docs/[[...slug]]/page.tsx ``` URL: - `/docs` - `/docs/react` - `/docs/react/hooks` --- ### 5. Route Groups (не URL-сегменти) Папки в круглих дужках: ```txt app/(auth)/login/page.tsx → /login ``` - **не формують сегмент URL** - використовуються лише для структури проекту --- ### 6. Паралельні сегменти Іменовані слоти для UI: ```txt app/dashboard/@stats/page.tsx ``` - `@stats` - сегмент UI, а не URL - використовується для складних layout'ів --- ## Як сегменти використовуються всередині Next.js ### Передача параметрів ```ts export default function Page({ params }) { // params.slug } ``` --- ### Керування layout'ами - кожен сегмент може мати свій `layout.tsx` - layout успадковується вниз по дереву --- ### Кеш і рендеринг - сегмент = межа кешу - Next.js може оновлювати частини сторінки незалежно --- ## Часті помилки - плутати route groups з URL - очікувати маршрут без `page.tsx` - неправильно використовувати catch-all --- ## Коротка відповідь для співбесіди > **Сегменти маршруту в Next.js - це частини URL, що відповідають папкам у** `app/`**. Вони можуть бути статичними, динамічними, catch-all або службовими і використовуються для формування URL, layout'ів і логіки рендерингу.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.