NextJS da Parallel Routing

NextJS da shunday qilish mumkinki, saytning bir qismi so'ralgan URL ga qarab turli kontentni ko'rsatsin. Bu parallel routing deyiladi.

Keling, bir misolni ko'rib chiqaylik. Faraz qilaylik, bizda quyidagi sayt layouti mavjud:

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

Faraz qilaylik, biz headerda dinamik ma'lumot chiqishini xohlaymiz. Faraz qilaylik, /users URL bo'yicha foydalanuvchilar komponenti, /posts URL bo'yicha esa postlar komponenti chiqsin.

Bunday parallel routing uchun maxsus papka yaratish kerak, uning nomi @ belgisi bilan boshlanishi kerak. Misol uchun, papkamizning nomi @info bo'lsin.

Ushbu papkada ikkita komponent joylashtiramiz. Birinchi foydalanuvchilarni ko'rsatish uchun /users/ papkasida, ikkinchi postlarni ko'rsatish uchun /posts/ papkasida. Bizning fayl strukturimiz quyidagicha bo'ladi:

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

Endi biz sayt layoutida maxsus o'rnatish buyrug'ini yozishimiz kerak. Buning uchun maxsus dinamik slot dan foydalanish kerak.

Bu nima ekanligini tushunish uchun, avvalo bizning sayt layout funksiyamizning parametriga qarang:

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

Parametr sifatida bizga obyekt uzatilayotganiga e'tibor bering, undan biz sayt kontentini children o'zgaruvchisiga ajratib olamiz.

Ushbu obyektda boshqa kalitlar ham bo'lishi mumkin. Ular nomi @ bilan boshlangan papkalarga mos keladi.

Bizning holatda, @info papkamiz mavjud, bu esa info o'zgaruvchisi mavjud bo'lishini anglatadi, URL ga qarab u foydalanuvchilar yoki postlar komponentlarining matnini o'z ichiga oladi. Keling, ushbu o'zgaruvchini ajratib olaylik:

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

Endi layoutning ichida biz info o'zgaruvchisini chiqarishimiz mumkin. URL ga qarab, aynan shu joyga bizning komponentlarimizning birining matni joylashtiriladi:

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

O'ng sidebar uchun dinamik slot yarating.

Chap sidebar uchun dinamik slot yarating.