Группы маршрутов (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="ru">
      <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="ru">
      <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 JS-Bundle: чистый SSR/SSG
│   └── page.tsx           ──► LCP: 0.6 сек (CDN Edge Cache)
└── (workspace)/
    ├── layout.tsx         ──► Содержит AuthContext, WebSocketProvider, ReactQuery
    └── editor/page.tsx    ──► Интерактивная рабочая среда

Распространённые ошибки: граничные сбои и безопасность#

Вопросы на собеседовании: Staff / Lead уровень#