Группы маршрутов и приватные папки

Иногда папка нужна только для порядка, а в адресе её быть не должно. Для этого есть группа маршрутов — папка, имя которой взято в круглые скобки, например (site). Next.js пропускает такое имя при построении адреса.

Группа для порядка

Перенесём страницу «О блоге» в группу:

app/
├── (site)/
│   └── about/
│       └── page.tsx      /about
└── posts/
    └── page.tsx          /posts

Страница по-прежнему открывается по адресу /about, а не /site/about. Файл page.tsx при этом не меняется.

Свой макет для группы

Главная польза групп — разные макеты для разных частей сайта без изменения адресов. Допустим, у страниц входа и регистрации нет меню блога. Положите их в группу (auth) со своим макетом:

// app/(auth)/layout.tsx
export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return <div className="auth-box">{children}</div>;
}

// app/(auth)/login/page.tsx
export default function LoginPage() {
  return <h1>Вход</h1>;
}

Адрес /login откроет страницу входа внутри блока auth-box. Макет (auth)/layout.tsx действует только на страницы этой группы.

Как это выглядит целиком

app/
├── layout.tsx              корневой макет — для всех
├── (site)/
│   ├── layout.tsx          меню блога
│   ├── page.tsx            /
│   └── about/page.tsx      /about
└── (auth)/
    ├── layout.tsx          простая рамка
    ├── login/page.tsx      /login
    └── register/page.tsx   /register

Корневой app/layout.tsx по-прежнему оборачивает всё; макеты групп вкладываются в него.

Приватные папки

Папка, имя которой начинается с подчёркивания, например _components, полностью исключается из маршрутов. В ней удобно держать компоненты, которые нужны только одному разделу:

// app/posts/_components/PostCard.tsx
export default function PostCard({ title }: { title: string }) {
  return <h2>{title}</h2>;
}

Импортируйте его в страницу как обычно: import PostCard from './_components/PostCard'. Даже если положить в такую папку page.tsx, адреса не появится.

Сводка

Частая ошибка

Сделать в двух группах страницы с одинаковым адресом, например app/(site)/about/page.tsx и app/(auth)/about/page.tsx. Обе дают адрес /about, и Next.js остановит сборку с ошибкой о двух страницах, которые ведут на один путь. Имена групп в адрес не входят — следите, чтобы адреса внутри групп не повторялись.