NextJS да параллель routing

NextJS да вебсайтнинг бир қисми сўралган URL га қараб турли мазмун кўрсатишини таъминлаш мумкин. Бу параллель routing деб аталади.

Келинг, мисолда кўриб чиқайлик. Фарз қилайлик, бизда куйидаги вебсайт макети мавжуд:

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

Фарз қилайлик, биз хедерда динамик маълумот чиқарилишини истаймиз. URL /users булганда фойдаланувчилар компоненти, URL /posts булганда эса постлар компоненти чиқсин.

Бундай параллель routing учун maxsus папка яратиш керак, унинг номи @ белгисидан бошланиши керак. Мисол учун бизнинг папкамизнинг номи @info булсин.

Бу папкада иккита компонент жойлаштирамиз. Биринчиси /users/ папкадаги фойдаланувчиларни кўрсатиш учун, иккинчиси эса /posts/ папкадаги постларни кўрсатиш учун. Бизнинг файл тузилимиз куйидагича булади:

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

Энди бизга вебсайт макетида maxsus ўрнатиш буйругини ёзиш керак. Бунинг учун maxsus динамик слот дан фойдаланиш керак.

Бу нима эканини тушуниш учun, аввал бизнинг вебсайт макети функциясининг параметрига қарайлик:

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

Параметр сифатида бизга объект берилаётганига диққат қилинг, унинг ичидан биз вебсайт мазмунини children ўзгарувчисига ажратамиз.

Бу объектда бошqa калитлар ҳам булиши мумкин. Улар номи @ дан бошланган папкаларга мос келади.

Бизнинг ҳолимизда @info папкаси мавжуд, бу эса бизга info ўзгарувчисининг mаълум бўлишини англатади, URL га қараб у шу компонентларнинг бирининг матнини - фойдаланувчилар ёки постларни ўз ичига олади. Бу ўзгарувчини оламиз:

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

Энди макет версткасининг ичида биз info ўзгарувчисини чиқара оламиз. URL га қараб ана шу жойга битимз компонентларнинг матни киритилади:

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

Ўнг сайдбар учун динамик слот яратинг.

Чап сайдбар учун динамик слот яратинг.