Paralelní routování v NextJS

V NextJS lze zařídit, aby část webu zobrazovala různý obsah v závislosti na požadovaném URL. Tomu se říká paralelní routování.

Podívejme se na příklad. Předpokládejme, že máme následující rozložení webu:

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

Předpokládejme, že chceme, aby se v hlavičce zobrazovaly dynamické informace. Na URL /users se nechť zobrazí komponenta s uživateli, a na URL /posts komponenta s příspěvky.

Pro takové paralelní routování je třeba vytvořit speciální složku, jejíž název začíná symbolem @. Pro příklad pojmenujme naši složku @info.

V této složce umístíme dva komponenty. První pro zobrazení uživatelů ve složce /users/, a druhý pro zobrazení příspěvků ve složce /posts/. Dostaneme následující strukturu souborů:

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

Nyní potřebujeme v rozložení webu napsat speciální příkaz pro vložení. K tomu je třeba použít speciální dynamický slot.

Abyste pochopili, co to je, podívejte se nejprve na parametr funkce našeho rozložení webu:

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

Všimněte si, že parametrem se nám předává objekt, ze kterého extrahujeme obsah webu do proměnné children.

V tomto objektu mohou být i další klíče. Odpovídají těm složkám, jejichž jméno jsme začali symbolem @.

V našem případě máme složku @info, což znamená, že budeme mít přístupnou proměnnou info, která v závislosti na URL obsahuje text jednoho z komponent - uživatelů nebo příspěvků. Získáme tuto proměnnou:

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

Nyní uvnitř rozvržení rozložení můžeme zobrazit proměnnou info. Na toto místo se v závislosti na URL bude vkládat text jednoho z našich komponent:

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