Vzporedno usmerjanje v NextJS

V NextJS je mogoče narediti tako, da del spletnega mesta prikaže različno vsebino odvisno od zahtevanega URL-ja. To se imenuje vzporedno usmerjanje.

Poglejmo si na primeru. Recimo, da imamo naslednjo postavitev spletnega mesta:

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

Recimo, da želimo, da se v glavi prikaže dinamična informacija. Naj bo na URL /users prikazan komponenta z uporabniki, na URL /posts pa komponenta z objavami.

Za takšno vzporedno usmerjanje je potrebno narediti posebno mapo, katere ime se začne s simbolom @. Za primer poimenujmo našo mapo @info.

V to mapo postavimo dva komponenta. Prvi za prikaz uporabnikov v mapi /users/, drugi za prikaz objav v mapi /posts/. Dobili bomo naslednjo datotečno strukturo:

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

Zdaj moramo v postavitvi spletnega mesta napisati poseben ukaz za vstavljanje. Za to je potrebno uporabiti posebno dinamično režo.

Da bi razumeli, kaj to je, najprej poglejte parameter funkcije naše postavitve spletnega mesta:

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

Bodite pozorni na to, da se kot parameter podaja objekt, iz katerega izluščimo vsebino spletnega mesta v spremenljivko children.

V tem objektu so lahko tudi drugi ključi. Ti ustrezajo tem mapam, katerih ime smo začeli z @.

V našem primeru imamo mapo @info, kar pomeni, da bomo imeli dostopno spremenljivko info, ki bo odvisno od URL-ja vsebovala besedilo enega od komponent - uporabnikov ali objav. Pridobimo to spremenljivko:

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

Zdaj lahko znotraj postavitve ogrodja izpišemo spremenljivko info. Na to mesto se bo odvisno od URL-ja vstavilo besedilo enega od naših komponent:

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

Naredite dinamično režo za desno stransko vrstico.

Naredite dinamično režo za levo stransko vrstico.