Групи маршрутів (Route Groups) у Next.js App Router

Навіщо це потрібно: проблематика та архітектурний контекст#

У файловій маршрутизації App Router фізична структура каталогів напряму транслюється в загальнодоступний URL. Проте в архітектурі масштабних enterprise-застосунків вимоги до організації кодової бази часто конфліктують із вимогами до публічної структури адрес:

• Різні інтерфейсні каркаси на одному рівні URL: Необхідність застосовувати принципово різні макети (Layouts) до сторінок без додавання зайвих префіксів у шлях (наприклад, мінімалістичний екран входу /login проти повнорозмірного робочого середовища /dashboard).
• Модульна організація за бізнес-доменами: Логічний поділ репозиторію за командами та зонами відповідальності (маркетинг, електронна комерція, білінг, панель адміністрування) без роздування шляху в адресному рядку браузера.
• Ізоляція клієнтських провайдерів: Запобігання витоку важких клієнтських контекстів (WebSocket, React Query, Zustand) у початковий бандл публічних маркетингових сторінок.

Next.js App Router вирішує це завдання за допомогою концепції Route Groups (груп маршрутів). Огортання імені папки в круглі дужки вказує збирачу Turbopack, що цей сегмент файлової системи призначений виключно для організації модулів і застосування макетів, та повністю виключається з підсумкового шляху URL.

Ментальна модель: ізоляція макетів без впливу на URL#

Коли компілятор Next.js обходить директорію app, імена папок, взяті в круглі дужки (folderName), слугують роздільниками на рівні файлової системи, але видаляються з рядка адреси при побудові таблиці маршрутів:

• Файл app/(marketing)/about/page.tsx компілюється в URL /about.
• Файл app/(dashboard)/analytics/page.tsx компілюється в URL /analytics.
• Файл app/(shop)/checkout/page.tsx компілюється в URL /checkout.

При цьому компілятор зберігає групу у внутрішньому Route Segment Tree ID. Це дозволяє призначати групі власний незалежний layout.tsx, loading.tsx та error.tsx.

Алгоритм виконання та життєвий цикл (Runtime Execution)#

Синтаксис та API: організація та множинні Root Layouts#

1. Вибіркове застосування макетів (Opt-in Layouts)#

У межах єдиного застосунку різні розділи можуть вимагати різного компонування. Створюючи групи, ви ізолюєте макети без зміни структури URL:

app/
├── (marketing)/
│   ├── layout.tsx         # Публічний каркас (Хедер, Промо-банер, Футер)
│   ├── page.tsx           # URL: / (Головний лендінг)
│   ├── about/page.tsx     # URL: /about
│   └── pricing/page.tsx   # URL: /pricing
└── (dashboard)/
    ├── layout.tsx         # Приватний каркас (Сайдбар із проєктами, меню профілю)
    ├── dashboard/page.tsx # URL: /dashboard
    └── settings/page.tsx  # URL: /settings

2. Множинні Root Layouts (Multiple Root Layouts)#

Next.js дозволяє повністю видалити кореневий app/layout.tsx і створити незалежні Root Layouts усередині кожної групи:

export default function MarketingRootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="uk">
      <body className="marketing-theme">
        {/* Чистий статичний HTML без важких клієнтських провайдерів */}
        <header className="marketing-header">Маркетинг</header>
        {children}
      </body>
    </html>
  );
}

import { AuthProvider } from '@/components/auth/AuthProvider';

export default function AppRootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="uk">
      <body className="app-theme">
        {/* Тут підключені важкі клієнтські провайдери сесії */}
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

Практичні патерни: архітектурна організація#

Патерн 1: Ізоляція важких контекстів та оптимізація LCP#

У комерційних проєктах критично, щоб лендінг завантажувався миттєво з найвищим показником Core Web Vitals (LCP менше 1.2 с). Використання Route Groups дозволяє ізолювати клієнтські провайдери авторизації та вебсокетів виключно в групі (app), зберігаючи (marketing) повністю легковагою:

app/
├── layout.tsx (Спільний Root Shell)
├── (marketing)/
│   ├── layout.tsx         ──► Zero Client JS Bundle: чистий SSR/SSG
│   └── page.tsx           ──► LCP: 0.6 сек (CDN Edge Cache)
└── (workspace)/
    ├── layout.tsx         ──► Містить AuthContext, WebSocketProvider, ReactQuery
    └── editor/page.tsx    ──► Інтерактивне робоче середовище

Поширені помилки: граничні збої та безпека#

Питання на співбесіді: Staff / Lead рівень#