Параллельный роутинг в 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>
	);
}

Сделайте динамический слот для правого сайдбара.

Сделайте динамический слот для левого сайдбара.