Parallell ruting i NextJS

I NextJS kan man gjøre det slik at en del av nettstedet viser ulikt innhold avhengig av den forespurte URL-en. Dette kalles parallell ruting.

La oss se på et eksempel. Anta at vi har følgende nettstedlayout:

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

Anta at vi ønsker at i header-en skal dynamisk informasjon vises. La URL-en /users vise en komponent med brukere, og URL-en /posts en komponent med innlegg.

for slik parallell ruting må man lage en spesiell mappe, som starter navnet med tegnet @. for eksempel, la oss kalle mappen vår @info.

I denne mappen plasserer vi to komponenter. Den første for å vise brukere i mappen /users/, og den andre for å vise innlegg i mappen /posts/. Vi vil få følgende filstruktur:

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

Nå må vi i nettstedlayouten skrive en spesiell kommando for innsetting. For dette må man bruke et spesielt dynamisk spor.

for å forstå hva dette er, se først på parameteren til layout-funksjonen vår:

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

Legg merke til at parameteren er et objekt, hvorfra vi henter nettstedets innhold i variabelen children.

Det kan være andre nøkler i dette objektet. De tilsvarer de mappene hvis navn vi startet med @.

I vårt tilfelle har vi mappen @info, noe som betyr at vi vil ha tilgang til variabelen info, som avhengig av URL-en vil inneholde teksten til en av komponentene - brukere eller innlegg. La oss hente denne variabelen:

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

Nå inne i layoutens kode kan vi vise variabelen info. På dette stedet, avhengig av URL-en, vil teksten til en av komponentene våre blitt satt inn:

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>
  );
}