Skip to main content

Які типи роутингу існують у Next.js?

Next.jsMiddle~2 хв читання
Запропонувати правку

У 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, вкладений, груповий, паралельний і перехоплюючий роутинг. Усі вони засновані на файловій системі і дозволяють будувати як прості, так і дуже складні інтерфейси без ручної конфігурації.

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

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

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

Запропонувати правку