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:

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

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

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

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

Vytvorte dynamický slot pre pravý bočný panel.

Vytvorte dynamický slot pre ľavý bočný panel.