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

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

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