Rutarea Paralelă în NextJS

În NextJS poți face ca o parte a site-ului să afișeze conținut diferit în funcție de URL-ul solicitat. Aceasta se numește rutare paralelă.

Să privim un exemplu. Să presupunem că avem următorul layout de site:

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

Să presupunem că vrem ca în header să fie afișată informație dinamică. Să zicem că la URL-ul /users să fie afișat un component cu utilizatori, iar la URL-ul /posts un component cu postări.

Pentru această rutare paralelă trebuie să creezi un folder special, începând numele său cu simbolul @. De exemplu, să numim folderul nostru @info.

În acest folder vom plasa două componente. Primul pentru afișarea utilizatorilor în folderul /users/, iar al doilea pentru afișarea postărilor în folderul /posts/. Vom obține următoarea structură de fișiere:

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

Acum trebuie în layout-ul site-ului să scriem o comandă specială pentru inserare. Pentru asta trebuie să folosim un slot dinamic special.

Pentru a înțelege ce este, mai întâi priviți parametrul funcției layout-ului nostru:

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

Observați că parametrul este un obiect, din care extragem conținutul site-ului în variabila children.

În acest obiect pot fi și alte chei. Ele corespund acelor folderere ale căror nume le-am început cu @.

În cazul nostru avem folderul @info, ceea ce înseamnă că vom avea acces la variabila info, care în funcție de URL va conține textul unuia dintre componente - utilizatori sau postări. Să obținem această variabilă:

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

Acum în interiorul layout-ului putem afișa variabila info. În acest loc, în funcție de URL, va fi inserat textul unuia dintre componentele noastre:

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

Creați un slot dinamic pentru bara laterală dreaptă.

Creați un slot dinamic pentru bara laterală stângă.