Gruppering av rutter i NextJS

Ibland kan vi behöva gruppera flera rutter i en mapp för enkelhetens skull så att grupperingsmappen inte skapar ett separat segment i URL:en.

För att göra detta ska namnet på grupperingsmappen omges av runda parenteser. Låt oss titta på ett exempel.

Låt oss säga att vi för URL:en /reg vill skapa registrering, och för URL:en /log - inloggning. Låt oss kombinera mapparna som motsvarar dessa URL:er i en gemensam mapp med namnet (auth).

Således kommer vi att få följande filstruktur:

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

Låt oss skapa filen för registreringssidan:

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

Låt oss skapa filen för inloggningssidan:

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