Паралельны раўтынг у NextJS

У NextJS можна зрабіць так, каб частка сайта паказвала розны змест у залежнасці ад запытанага URL. Гэта называецца паралельны раўтынг.

Давайце паглядзім на прыкладзе. Хай у нас ёсць наступны макет сайта:

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 кампанент з пастамі.

Для такога паралельнага раўтынгу трэба зрабіць спецыяльную папку, пачаўшы яе імя з сімвала @. Для прыкладу назвам нашу папку @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>
	);
}

Зрабіце дынамічны слот для правага бакавога меню.

Зрабіце дынамічны слот для левага бакавога меню.