Skip to main content

Що таке route groups?

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

Route Groups у Next.js - це спосіб логічно згрупувати маршрути, не впливаючи на URL. Вони дозволяють навести лад у структурі app/, не змінюючи адреси сторінок.

Простіше кажучи:

route group - це папка в дужках, яка існує тільки для розробника, а не для користувача.

Як виглядають route groups

Route group - це папка з ім'ям у круглих дужках:

txt
app/ ├─ (auth)/ │ ├─ login/ │ │ └─ page.tsx → /login │ └─ register/ │ └─ page.tsx → /register └─ (marketing)/ └─ page.tsx → /

Папка (auth) не з'являється в URL.

Навіщо потрібні route groups

1. Логічна організація проекту

Можна групувати маршрути за змістом:

  • авторизація
  • маркетинг
  • адмінка
  • публічна частина

При цьому URL залишаються чистими і зрозумілими.

2. Різні layout'и для однакових рівнів URL

Route groups часто використовують, щоб:

  • мати різні layout'и
  • для сторінок на одному рівні URL
  • але з різною структурою UI

Приклад:

txt
app/ ├─ (public)/layout.tsx ├─ (admin)/layout.tsx

Обидві групи можуть містити сторінки /, але з різним layout'ом (через вкладені сегменти).

3. Ізоляція layout'ів і логіки

Кожна route group може мати свій:

  • layout
  • loading
  • error
  • middleware-логіку
  • провайдери

Це зручно, коли:

  • різні частини сайту живуть «своїм життям»
  • не хочеться змішувати код

4. Чисті та передбачувані URL

Route groups дозволяють:

  • не додавати технічні сегменти в адресу
  • не плодити /auth/login, якщо потрібен /login
  • зберігати гарну структуру посилань

URL проєктується для користувача, а папки - для розробника.

Важливі особливості

  • (group) ніколи не потрапляє в URL
  • всередині групи можна використовувати layout.tsx
  • групи не впливають на вкладеність URL
  • можна комбінувати з вкладеними layout'ами

Приклад з layout

txt
app/ ├─ (auth)/ │ ├─ layout.tsx │ └─ login/ │ └─ page.tsx → /login ├─ (main)/ │ ├─ layout.tsx │ └─ page.tsx → /

Тут:

  • /login використовує auth-layout
  • / використовує main-layout
  • URL залишаються чистими

Підсумок

Route groups потрібні для того, щоб:

  • логічно організувати маршрути
  • застосовувати різні layout'и
  • не засмічувати URL
  • ізолювати логіку і провайдери

Коротко: route groups - це архітектурний інструмент для порядку в проекті, а не для навігації користувача.

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

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

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

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