Równoległe routowanie w NextJS

W NextJS można sprawić, aby część strony wyświetlała różną treść w zależności od żądanego URL. Nazywa się to równoległym routowaniem.

Spójrzmy na przykład. Załóżmy, że mamy następujący układ strony:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				<header>
					nagłówek
				</header>
				<main>
					{children}
				</main>
				<footer>
					stopka
				</footer>
			</body>
		</html>
	);
}

Załóżmy, że chcemy, aby w nagłówku wyświetlały się dynamiczne informacje. Niech pod adresem /users wyświetla się komponent z użytkownikami, a pod adresem /posts komponent z postami.

Do takiego równoległego routowania trzeba utworzyć specjalny folder, zaczynając jego nazwę od symbolu @. Dla przykładu nazwijmy nasz folder @info.

W tym folderze umieścimy dwa komponenty. Pierwszy do wyświetlania użytkowników w folderze /users/, a drugi do wyświetlania postów w folderze /posts/. Otrzymamy następującą strukturę plików:

/app/
- /@info/
  - /users/
    - page.jsx
  - /posts/
    - page.jsx

Teraz musimy w układzie strony napisać specjalną komendę do wstawienia. W tym celu należy użyć specjalnego dynamicznego slotu.

Aby zrozumieć, co to jest, najpierw spójrz na parametr funkcji naszego układu strony:

export default function RootLayout({children}) {
	return (
		
	);
}

Zwróć uwagę, że parametrem przekazywany jest obiekt, z którego pobieramy treść strony do zmiennej children.

W tym obiekcie mogą znajdować się inne klucze. Odpowiadają one tym folderom, których nazwy zaczęliśmy od @.

W naszym przypadku mamy folder @info, co oznacza, że będziemy mieli dostępną zmienną info, która w zależności od URL będzie zawierała tekst jednego z komponentów - użytkowników lub posty. Pobierzmy tę zmienną:

export default function RootLayout({children, info}) {
	return (
		
	);
}

Teraz wewnątrz struktury układu możemy wyświetlić zmienną info. W to miejsce, w zależności od URL, będzie wstawiany tekst jednego z naszych komponentów:

export default function RootLayout({children, info}) {
	return (
		<html lang="en">
			<body>
				<header>
					<div>
						{info}
					</div>
				</header>
				<main>
					{children}
				</main>
				<footer>
					stopka
				</footer>
			</body>
		</html>
	);
}

Utwórz dynamiczny slot dla prawego paska bocznego.

Utwórz dynamiczny slot dla lewego paska bocznego.