NextJS-de paralel routing

NextJS-de şonu ýerine ýetirmek mümkün, web sahypasynyň bölegi talap edilen URL-e baglylykda par-parý mazmuny görkezmeli. Buna paralel routing diýilýär.

Geliň mysal bilen göreli. Bizde aşakdaky web sahypa makady bolsun:

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

Farz edeliň, biz headerde dynamik maglumat görkezmek isleýäris. URL /users bolanda ulanyjylar komponenti, URL /posts bolanda bolsa postlar komponenti görkezilsin.

Şeýle paralel routing üçin ýörite bir papka döretmeli, onyň adyny @ belgisi bilen başlamaly. Mysal üçin bizim papkamyzy @info diýip atlandyralyň.

Bu papkanyň içine iki sany komponent ýerleşdireris. Birinjisi /users/ papkasynda ulanyjylary görkezmek üçin, ikinjisi bolsa /posts/ papkasynda postlary görkezmek üçin. Biziň faýl gurluşymyz aşakdaky ýaly bolar:

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

Indi biz web sahypa makadynda ýörite bir goýbermek buýrugyny ýazmaly. Bunun üçin ýörite bir dinamik slot ulanylýar.

Bu nämedigini düşünmek üçin, ilki bilen biziň web sahypa makadymyzyň funksiýa parametrine serediň:

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

Üns beriň, bize parametr hökmünde bir obýekt berlýär, biz ondan web sahypanyň mazmunyny children üýtgeýjisine çykarýarys.

Bu obýektde beýleki açarlar hem bolup biler. Olar ady @ bilen başlan papkalara gabat gelýär.

Bizim ýagdaýymyzda bizde @info papkasy bar, bu bolsa biz üçin info üýtgeýjisiniň elýeterli boljakdygyny aňladýar, URL-e baglylykda ol komponentleriň biriniň tekstini - ulanyjylary ýa-da postlary saklar. Bu üýtgeýjini alyň:

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

Indi makadyň HTML gurluşy içinde biz info üýtgeýjisini görkezip bileris. Bu ýere URL-e baglylykda biziň komponentleriňiziň biriniň teksti goýuljak:

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

Sag tarapdaky sidebar üçin dinamik slot düzüň.

Çep tarapdaky sidebar üçin dinamik slot düzüň.