Paralelný routing v NextJS

V NextJS je možné dosiahnuť, aby časť stránky zobrazovala rôzny obsah v závislosti od požadovaného URL. Tomu sa hovorí paralelný routing.

Pozrime sa na príklad. Predpokladajme, že máme nasledujúci layout stránky:

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

Predpokladajme, že chceme, aby v hlavičke bol zobrazený dynamický obsah. Nech pri URL /users sa zobrazí komponent s používateľmi a pri URL /posts komponent s príspevkami.

Pre takýto paralelný routing je potrebné vytvoriť špeciálny priečinok, ktorého názov začína symbolom @. Pre príklad nazvime náš priečinok @info.

V tomto priečinku umiestnime dva komponenty. Prvý pre zobrazenie používateľov v priečinku /users/, a druhý pre zobrazenie príspevkov v priečinku /posts/. Dostaneme nasledujúcu štruktúru súborov:

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

Teraz potrebujeme v layout stránky napísať špeciálny príkaz pre vloženie. Na to je potrebné použiť špeciálny dynamický slot.

Aby sme pochopili, čo to je, pozrime sa najprv na parameter funkcie nášho layout stránky:

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

Všimnite si, že parametrom je nám odovzdávaný objekt, z ktorého vyberáme obsah stránky do premennej children.

V tomto objekte môžu byť aj iné kľúče. Zodpovedajú priečinkom, ktorých názov začína s @.

V našom prípade máme priečinok @info, čo znamená, že budeme mať prístupnú premennú info, ktorá v závislosti od URL bude obsahovať text jedného z komponentov - používateľov alebo príspevky. Získajme túto premennú:

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

Teraz môžeme vo vnútri layoutu vypísať premennú info. Na toto miesto bude v závislosti od URL vložený text jedného z našich komponentov:

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