Группировка роутов в NextJS

Иногда нам может потребоваться для удобства сгруппировать несколько роутов в одну папку так, чтобы группирующая папка не создавала отдельный сегмент в URL.

Для этого имя группирующей папки следует взять в круглые скобки. Давайте посмотрим на примере.

Пусть по URL /reg мы хотим сделать регистрацию, а по URL /log - авторизацию. Объединим папки, соответствующие этим URL в одну общую папку с именем (auth).

Таким образом у нас получится следующая файловая структура:

• /app//(auth)//reg/page.jsx/log/page.jsx

Сделаем файл для страницы регистрации:

app/(auth)/reg/page.jsxexport default function Reg() {
  return <h1>register</h1>;
}

Сделаем файл для страницы авторизации:

app/(auth)/log/page.jsxexport default function Log() {
  return <h1>login</h1>;
}