Паралелен маршрутизация в 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>
	);
}

Направете динамичен слот за десния страничен панел.

Направете динамичен слот за левия страничен панел.