Grupowanie tras w NextJS

Czasami dla wygody może zaistnieć potrzeba pogrupowania kilku tras w jeden folder tak, aby folder grupujący nie tworzył osobnego segmentu w URL.

Aby to zrobić, nazwę folderu grupującego należy umieścić w okrągłych nawiasach. Spójrzmy na przykład.

Załóżmy, że pod adresem /reg chcemy zrobić rejestrację, a pod adresem /log - autoryzację. Połączmy foldery odpowiadające tym adresom w jeden wspólny folder o nazwie (auth).

W ten sposób otrzymamy następującą strukturę plików:

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

Stwórzmy plik dla strony rejestracji:

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

Stwórzmy plik dla strony autoryzacji:

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