Groeperen van routes in NextJS

Soms kunnen we voor het gemak meerdere routes in één map groeperen zodat de groeperende map geen afzonderlijk segment in de URL creëert.

Om dit te doen, moet de naam van de groeperende map tussen ronde haakjes worden geplaatst. Laten we een voorbeeld bekijken.

Stel dat we voor de URL /reg registratie willen aanbieden, en voor de URL /log - autorisatie. Laten we de mappen die bij deze URL's horen samenvoegen in één algemene map met de naam (auth).

Zo krijgen we de volgende bestandsstructuur:

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

Laten we een bestand maken voor de registratiepagina:

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

Laten we een bestand maken voor de autorisatiepagina:

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