Rrouting Paralel në NextJS

Në NextJS mund të bëhet që një pjesë e faqes të shfaqë përmbajtje të ndryshme në varësi të URL-së së kërkuar. Kjo quhet rrouting paralel.

Le të shohim një shembull. Le të themi se kemi layout-in e mëposhtëm të faqes:

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

Le të themi se duam që në header të shfaqet informacion dinamik. Le të themi se në URL /users të shfaqet komponenti me përdoruesit, dhe në URL /posts komponenti me postimet.

Për këtë rrouting paralel duhet bërë një dosje të veçantë, duke filluar emrin e saj me shenjën @. Për shembull, le ta emërojmë dosjen tonë @info.

Në këtë dosje do të vendosim dy komponentë. Njeri për të shfaqur përdoruesit në dosjen /users/, dhe tjetri për të shfaqur postimet në dosjen /posts/. Do të kemi strukturën e mëposhtme skedarësh:

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

Tani na duhet në layout-in e faqes të shkruajmë një komandë të veçantë për futje. Për këtë duhet përdorur një slot dinamik të veçantë.

Për të kuptuar se çfarë është, së pari shikoni parametrin e funksionit të layout-it tonë të faqes:

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

Kushtojini vëmendje faktit që si parametër na kaltohet një objekt, nga i cili ne nxjerrim përmbajtjen e faqes në variablin children.

Në këtë objekt mund të ketë edhe çelësa të tjerë. Ata korrespondojnë me ato dosje, emri të cilave e kemi filluar me @.

Në rastin tonë kemi dosjen @info, që do të thotë se do të kemi të përdorshme variablin info, e cila në varësi të URL-së do të përmbajë tekstin e njërit prej komponentëve - përdoruesit ose postimet. Le ta marrim këtë variabël:

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

Tani brenda strukturës së layout-it mund të shfaqim variablin info. Në këtë vend, në varësi të URL-së, do të futet teksti i njërit prej komponentëve tanë:

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

Bëni një slot dinamik për sidebar-in e djathtë.

Bëni një slot dinamik për sidebar-in e majtë.