Parallel Routing i NextJS

I NextJS kan man gøre det så en del af sitet viser forskelligt indhold afhængigt af den anmodede URL. Dette kaldes parallel routing.

Lad os se på et eksempel. Antag at vi har følgende layout for sitet:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          header
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

Antag at vi ønsker, at headeren viser dynamisk information. Lad URL'en /users vise en komponent med brugere, og URL'en /posts en komponent med indlæg.

For sådan parallel routing skal man lave en speciel mappe, der starter med tegnet @. Lad os for eksempel kalde vores mappe @info.

I denne mappe placerer vi to komponenter. Den første til at vise brugere i mappen /users/, og den anden til at vise indlæg i mappen /posts/. Vi får følgende filstruktur:

• /app//@info//users/page.jsx/posts/page.jsx

Nu skal vi i sitets layout skrive en speciel kommando for indsættelse. For dette skal man bruge en speciel dynamisk slot.

For at forstå hvad det er, se først på parameteren for vores sitelayout-funktion:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    
  );
}

Læg mærke til at parameteren er et objekt, hvorfra vi udtrækker sitets indhold i variablen children.

Der kan være andre nøgler i dette objekt. De svarer til de mapper, hvis navn vi startede med @.

I vores tilfælde har vi mappen @info, hvilket betyder at vi vil have adgang til variablen info, der afhængigt af URL'en vil indeholde teksten fra en af komponenterne - brugere eller indlæg. Lad os hente denne variabel:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    
  );
}

Nu kan vi inde i layoutets kode udskrive variablen info. På dette sted vil, afhængigt af URL'en, teksten fra en af vores komponenter blive indsat:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    <html lang="en">
      <body>
        <header>
          <div>
            {info}
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}