Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які типи роутингу існують у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У **Next.js** роутинг будується навколо **файлової системи**, але всередині неї є **кілька типів роутингу**, кожен з яких вирішує своє завдання. **Ключове:** у Next.js існують статичний, динамічний, catch-all, вкладений, груповий, паралельний і перехоплюючий роутинг, і всі вони засновані на файловій системі.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ **Next.js** роутинг будується навколо **файлової системи**, але всередині неї є **кілька типів роутингу**, кожен вирішує своє завдання. Нижче - повний і структурований огляд. --- ## 1. Статичний роутинг Найбазовіший тип. ```txt app/about/page.tsx → /about ``` - URL фіксований - підходить для звичайних сторінок - мінімум логіки **Коли використовувати:** лендінги, інфо-сторінки. --- ## 2. Динамічний роутинг URL містить параметри. ```txt app/blog/[slug]/page.tsx → /blog/nextjs-routing ``` - `[param]` - динамічний сегмент - доступний на сервері і клієнті **Коли використовувати:** статті, картки товарів, профілі. --- ## 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. Вкладений роутинг (Nested routes) Роути всередині роутів + спільні layout'и. ```txt app/dashboard/layout.tsx app/dashboard/page.tsx app/dashboard/settings/page.tsx ``` - спільний layout - незалежні сторінки всередині **Коли використовувати:** кабінети, панелі, SaaS. --- ## 6. Route Groups (групування роутів) Групування **без впливу на URL**. ```txt app/(auth)/login/page.tsx → /login app/(auth)/register/page.tsx → /register ``` - папка в дужках не потрапляє в URL - чиста архітектура **Коли використовувати:** auth, admin, marketing-зони. --- ## 7. Паралельний роутинг (Parallel Routes) Кілька незалежних UI-областей на одному URL. ```txt app/dashboard/@stats/page.tsx app/dashboard/@feed/page.tsx ``` - різні джерела даних - незалежний рендеринг **Коли використовувати:** дашборди, складні інтерфейси. --- ## 8. Перехоплюючий роутинг (Intercepting Routes) Дозволяє **перехоплювати навігацію**. Приклад: - `/photos/123` відкривається як **модалка** - при прямому переході - як сторінка **Коли використовувати:** модальні вікна, overlays. --- ## 9. Клієнтський роутинг (Navigation) Навігація без перезавантаження сторінки: - `<Link />` - `router.push()` Працює поверх серверного роутингу. --- ## Коротка таблиця | Тип | Для чого | |---|---| | Статичний | Звичайні сторінки | | Динамічний | Контент за параметрами | | Catch-all | Будь-яка глибина | | Optional catch-all | Корінь + вкладеність | | Вкладений | Спільні layout'и | | Route Groups | Архітектура без URL | | Паралельний | Кілька UI-областей | | Перехоплюючий | Модалки і overlay | | Клієнтський | SPA-навігація | --- ## Відповідь для співбесіди > **У Next.js існують статичний, динамічний, catch-all, вкладений, груповий, паралельний і перехоплюючий роутинг. Усі вони засновані на файловій системі і дозволяють будувати як прості, так і дуже складні інтерфейси без ручної конфігурації.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.