NextJS'теги параллелдүү роутинг

NextJS'те сайттын бир бөлүгү суралган URL'ге жараша ар кандай мазмунду көрсөтө тургандай кылууга болот. Бул параллелдүү роутинг деп аталат.

Келгиле, мисал менен карап көрөлү. Биздин сайтыбыздын төмөнкүдөй макети бар деп коёлу:

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

Биз хедерде динамикалык маалымат чыгарылсын деп каалайбыз деп коёлу. /users URL'и боюнча колдонуучулардын компоненти, ал эми /posts URL'и боюнча посттордун компоненти чыгышы керек.

Ушундай параллелдүү роутинг үчүн атайын бир папка жасаш керек, анын атын @ белгиси менен башташ керек. Мисал үчүн биздин папкабыздын атын @info коёлу.

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

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

Эми биз сайттын макетинде киргизүү үчүн атайын буйрук жазышыбыз керек. Бул үчүн атайын динамикалык слот колдонуш керек.

Бул эмне экенин түшүнүү үчүн, адегенде сайтыбыздын макет функциясынын параметрине караңыз:

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

Параметр катары бизге объект берилгенине көңүл бургула, андан биз сайттын мазмунун children өзгөрмөсүнө бөлүп алабыз.

Бул объектте башка ачкычтар да болушу мүмкүн. Алар биз атын @ менен баштаган папкаларга туура келет.

Биздин учурда бизде @info папкасы бар, демек бизге info өзгөрмөсү жеткиликтүү болот, ал 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>
	);
}

Оң жагындагы сайдбар үчүн динамикалык слот жасаңыз.

Сол жагындагы сайдбар үчүн динамикалык слот жасаңыз.