Paralelni rutiranje u NextJS

U NextJS-u je moguće napraviti tako da deo sajta prikazuje različit sadržaj zavisno od traženog URL-a. Ovo se zove paralelno rutiranje.

Hajde da pogledamo na primeru. Pretpostavimo da imamo sledeći layout sajta:

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

Pretpostavimo da želimo da se u header-u prikazuju dinamičke informacije. Neka za URL /users bude prikazan komponent sa korisnicima, a za URL /posts komponent sa postovima.

Za ovakvo paralelno rutiranje potrebno je napraviti posebnu fasciklu, čije ime počinje sa simbolom @. Za primer, nazvaćemo našu fasciklu @info.

U ovoj fascikli ćemo smestiti dva komponenta. Prvi za prikaz korisnika u fascikli /users/, a drugi za prikaz postova u fascikli /posts/. Dobićemo sledeću strukturu fajlova:

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

Sada u layout-u sajta treba da napišemo posebnu komandu za umetanje. Za to je potrebno koristiti poseban dinamički slot.

Da biste razumeli šta je to, prvo pogledajte parametar funkcije našeg layout-a sajta:

export default function RootLayout({children}) {
	return (
		
	);
}

Obratite pažnju na to da se parametrom prosledjuje objekat, iz kojeg izdvajamo sadržaj sajta u promenljivu children.

U ovom objektu mogu biti i drugi ključevi. Oni odgovaraju onim fasciklama čije je ime počinjalo sa @.

U našem slučaju imamo fasciklu @info, što znači da će nam biti dostupna promenljiva info, koja će zavisno od URL-a sadržati tekst jednog od komponenta - korisnike ili postove. Dobijamo ovu promenljivu:

export default function RootLayout({children, info}) {
	return (
		
	);
}

Sada unutar markup-a layout-a možemo prikazati promenljivu info. Na ovo mesto će zavisno od URL-a biti umetnut tekst jednog od naših komponenta:

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

Napravite dinamički slot za desni sidebar.

Napravite dinamički slot za levi sidebar.