Группы маршрутов в Next.js 15: зачем нужны и как использовать

1. Что такое группы маршрутов в Next.js?

В App Router Next.js 15 появилась особая возможность — группы маршрутов (route groups). На первый взгляд, это просто папка с необычным именем: вместо обычного users или [id] вы создаёте папку с круглой скобкой в имени, например, (dashboard) или (marketing).

Пример:

app/
  (dashboard)/
    stats/
      page.tsx
    users/
      page.tsx
  (marketing)/
    about/
      page.tsx
    promo/
      page.tsx

На первый взгляд, кажется, что эти папки — просто странные имена. Но на деле, папки в круглых скобках не влияют на URL! Они нужны только для организации структуры проекта и управления раскладками, а не для построения путей.

Пример: Как это работает

Если вы создадите файл app/(dashboard)/users/page.tsx, то страница будет доступна по адресу /users, а не по /dashboard/users. Папка (dashboard) — это просто "группа" для организации кода.

2. Зачем нужны группы маршрутов? Зачем изобретать велосипед?

Когда проект становится большим, структура папки app/ может быстро превратиться в хаос. Особенно если у вас появляются разные "разделы" приложения: публичная часть, админка, маркетинговые страницы, личный кабинет и т.д.

Без групп маршрутов:

app/
  login/
    page.tsx
  register/
    page.tsx
  dashboard/
    page.tsx
  dashboard/
    stats/
      page.tsx
  dashboard/
    users/
      page.tsx
  about/
    page.tsx
  promo/
    page.tsx

Всё смешивается в одну кучу, легко запутаться.

С группами маршрутов:

app/
  (auth)/
    login/
      page.tsx
    register/
      page.tsx
  (dashboard)/
    dashboard/
      page.tsx
    stats/
      page.tsx
    users/
      page.tsx
  (marketing)/
    about/
      page.tsx
    promo/
      page.tsx

Теперь видно, где что лежит, и можно легко переиспользовать раскладки (layout.tsx) для целых групп.

3. Как работают группы маршрутов? Главное правило

Группа маршрутов — это папка в круглых скобках, которая не влияет на URL, но влияет на структуру проекта и поведение layout-ов.

• Всё, что находится внутри (имя-группы)/, будет работать так, как будто этой папки нет для формирования пути в браузере.
• Вы можете использовать любые имена: (admin), (user-area), (public), (marketing).
• Можно создавать несколько групп на одном уровне, и даже вкладывать группы друг в друга (но не увлекайтесь, иначе превратитесь в рекурсивного дракона).

Пример:

app/
  (admin)/
    dashboard/
      page.tsx
    users/
      page.tsx
  (public)/
    about/
      page.tsx
    contacts/
      page.tsx

Пояснение:

• /dashboard → app/(admin)/dashboard/page.tsx
• /about → app/(public)/about/page.tsx

URL не содержит имени группы! Это важно.

4. Главная польза: Разделение структур (layout.tsx) для разных частей приложения

В Next.js layout-ы (layout.tsx) определяют общее оформление и структуру для вложенных страниц. С помощью групп маршрутов вы можете применять разные layout-ы к разным разделам приложения, даже если URL у них совпадают по структуре.

Пример: Личный кабинет и публичная часть

app/
  (dashboard)/
    layout.tsx      // layout для ЛК
    profile/
      page.tsx
    stats/
      page.tsx
  (public)/
    layout.tsx      // layout для публичной части
    home/
      page.tsx
    about/
      page.tsx

Пояснение:

• Страница /profile будет использовать layout из app/(dashboard)/layout.tsx.
• Страница /home — layout из app/(public)/layout.tsx.

Зачем это?
В ЛК вы хотите показывать сайдбар, меню пользователя, другую "шапку".
В публичной части — обычный хедер и футер сайта.

Без групп маршрутов пришлось бы делать кучу проверок внутри layout-а: "Если сейчас страница ЛК — показываем одно, иначе другое..." Это быстро превращается в нечитаемый спагетти-код.

5. Пример кода: layout.tsx для группы маршрутов

Давайте попробуем реализовать два разных layout-а для разных групп.

app/(dashboard)/layout.tsx

// Лейаут для личного кабинета
export default function DashboardLayout({ children }) {
  return (
    <div>
      <aside>Меню пользователя</aside>
      <main>{children}</main>
    </div>
  );
}

app/(public)/layout.tsx

// Лейаут для публичной части
export default function PublicLayout({ children }) {
  return (
    <div>
      <header>Публичная шапка сайта</header>
      <main>{children}</main>
      <footer>Футер</footer>
    </div>
  );
}

app/(dashboard)/profile/page.tsx

export default function ProfilePage() {
  return <h1>Профиль пользователя</h1>;
}

app/(public)/home/page.tsx

export default function HomePage() {
  return <h1>Главная страница</h1>;
}

Пояснение:

• /profile — будет с меню пользователя.
• /home — с публичной шапкой и футером.

6. Полезные нюансы

Как это все связано с вложенными layout-ами?

Группы маршрутов можно вкладывать друг в друга, и layout-ы будут применяться по принципу вложенности.

Пример:

app/
  (dashboard)/
    layout.tsx
    (analytics)/
      layout.tsx
      stats/
        page.tsx

Для /stats сначала применится layout из (dashboard), потом из (analytics), потом уже страница.

Когда группы маршрутов реально спасают проект?

Разделение публичной и приватной части
Когда у вас есть публичные страницы (например, маркетинг, блог, контакты) и приватные (личный кабинет, админка), группы маршрутов позволяют чётко их разделить и не мешать их логику.

Разные шаблоны для разных разделов
Вам не нужно городить кучу условий в одном layout-е. Каждый раздел получает свой layout, свой стиль, свои компоненты.

Масштабирование и поддержка
Когда проект растёт, вы не сойдёте с ума от количества файлов в папке app/. Всё структурировано и понятно.

Разделение зон ответственности
Команды могут работать над своими группами маршрутов, не мешая друг другу. Например, команда маркетинга работает только в (marketing), команда админки — в (admin).

Можно ли использовать одну и ту же страницу в нескольких группах?

Да, и это очень удобно! Например, у вас есть страница about, которая должна показываться и в публичной части, и в админке, но с разным оформлением.

Структура:

app/
  (public)/
    about/
      page.tsx
  (admin)/
    about/
      page.tsx

Вы можете даже импортировать один и тот же компонент в оба файла, если логика совпадает, а оформление разное.

Можно ли вкладывать группы маршрутов друг в друга?

Да! Но не увлекайтесь, иначе структура станет слишком сложной для понимания. Обычно достаточно одного или двух уровней.

Пример:

app/
  (admin)/
    (settings)/
      users/
        page.tsx

URL будет /users, но для кода это будет "пользовательские настройки в админке".

7. Типичные ошибки при работе с группами маршрутов

Ошибка №1: Ожидание, что имя группы появится в URL.
Очень часто новички думают, что если создать папку app/(dashboard)/profile/page.tsx, то страница будет доступна по /dashboard/profile. Но это не так! Имя группы не влияет на URL вообще. Если нужен префикс в URL, используйте обычную папку без скобок: app/dashboard/profile/page.tsx.

Ошибка №2: Дублирование страниц из-за неправильной структуры.
Иногда случайно создают одинаковые страницы в разных группах, а потом удивляются, что изменения не видны — потому что редактируют не тот файл.

Ошибка №3: Слишком глубокая вложенность групп.
Вложенные группы — это мощно, но если увлечься, можно легко запутаться, какой layout сейчас применяется. Старайтесь держать структуру максимально плоской.

Ошибка №4: Ожидание, что группы маршрутов могут влиять на маршрутизацию API.
Группы маршрутов работают только для страниц и layout-ов, но не для route handlers (API). Для API структура папок должна отражать реальный путь.

Ошибка №5: Путаница с layout-ами и их областью действия.
Если layout лежит в группе маршрутов, он применяется только к страницам внутри этой группы. Если нужен общий layout для всего приложения — кладите его в корень app/layout.tsx.