Routage parallèle dans NextJS

Dans NextJS, il est possible de faire en sorte qu'une partie du site affiche un contenu différent en fonction de l'URL demandée. Cela s'appelle le routage parallèle.

Regardons un exemple. Supposons que nous ayons la mise en page de site suivante :

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

Supposons que nous voulions afficher des informations dynamiques dans l'en-tête. Que l'URL /users affiche un composant avec les utilisateurs, et que l'URL /posts affiche un composant avec les articles.

Pour un tel routage parallèle, il faut créer un dossier spécial, en commençant son nom par le symbole @. Par exemple, nommons notre dossier @info.

Dans ce dossier, nous placerons deux composants. Le premier pour afficher les utilisateurs dans le dossier /users/, et le second pour afficher les articles dans le dossier /posts/. Nous obtiendrons la structure de fichiers suivante :

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

Maintenant, nous devons écrire une commande spéciale d'insertion dans la mise en page du site. Pour cela, il faut utiliser un emplacement dynamique spécial.

Pour comprendre ce que c'est, commençons par regarder le paramètre de la fonction de notre mise en page de site :

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

Remarquez que le paramètre est un objet, duquel nous extrayons le contenu du site dans la variable children.

Il peut y avoir d'autres clés dans cet objet. Elles correspondent aux dossiers dont le nom commence par @.

Dans notre cas, nous avons le dossier @info, ce qui signifie que nous aurons accès à la variable info, qui, en fonction de l'URL, contiendra le texte de l'un des composants - utilisateurs ou articles. Récupérons cette variable :

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

Maintenant, à l'intérieur de la structure de la mise en page, nous pouvons afficher la variable info. À cet endroit, en fonction de l'URL, le texte de l'un de nos composants sera inséré :

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

Créez un emplacement dynamique pour la barre latérale droite.

Créez un emplacement dynamique pour la barre latérale gauche.