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>
	);
}

Оң жақ бүйір панелі үшін динамикалық слот жасаңыз.

Сол жақ бүйір панелі үшін динамикалық слот жасаңыз.