Parallell routing i NextJS

I NextJS kan man göra så att en del av webbplatsen visar olika innehåll beroende på den begärda URL:en. Detta kallas parallell routing.

Låt oss titta på ett exempel. Antag att vi har följande layout för webbplatsen:

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

Antag att vi vill att dynamisk information skall visas i headern. Låt URL:en /users visa en komponent med användare, och URL:en /posts visa en komponent med inlägg.

För sådan parallell routing behöver man skapa en speciell mapp, som börjar med tecknet @. Låt oss för exemplet döpa vår mapp till @info.

I denna mapp placerar vi två komponenter. Den första för att visa användare i mappen /users/, och den andra för att visa inlägg i mappen /posts/. Vi kommer att få följande filstruktur:

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

Nu behöver vi i webbplatsens layout skriva ett speciellt kommando för infogning. För detta behöver man använda en speciell dynamisk slot.

För att förstå vad detta är, titta först på parametern till vår layoutfunktion:

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

Lägg märke till att parametern är ett objekt, från vilket vi extraherar webbplatsens innehåll till variabeln children.

Det kan finnas andra nycklar i detta objekt. De motsvarar de mappar vars namn vi började med @.

I vårt fall har vi mappen @info, vilket betyder att vi kommer att ha tillgång till variabeln info, som beroende på URL:en innehåller texten från en av komponenterna - användare eller inlägg. Låt oss hämta denna variabel:

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

Nu inuti layoutens utskrift kan vi visa variabeln info. På denna plats kommer, beroende på URL:en, texten från en av våra komponenter att infogas:

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