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:

export 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:

export 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:

export 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:

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

Vytvořte dynamický slot pro pravý postranní panel.

Vytvořte dynamický slot pro levý postranní panel.