Dispositions imbriquées dans NextJS

Comme vous le savez, dans le dossier /app dans le fichier /layout.jsx se trouve la disposition principale du site.

Si vous le souhaitez, cependant, dans les dossiers imbriqués, vous pouvez créer vos propres dispositions. Dans ce cas, le contenu de la page sera d'abord inséré dans la disposition imbriquée, puis le résultat obtenu sera inséré dans la disposition principale.

Essayons en pratique. Supposons que notre disposition principale ait l'aspect suivant :

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

Créons une autre disposition, imbriquée, pour tous les contenus du dossier /users :

export default function UsersLayout({children}) {
	return (
		<div className="info">
			message for all users
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Comme vous le voyez, dans cette disposition nous n'indiquons pas les balises principales de la page, car elles sont déjà présentes dans notre disposition principale du site.

Créons également un fichier avec le contenu pour afficher l'utilisateur :

export default function User() {
	return <>
		<h1>User</h1>
		<p>
			user description
		</p>
	</>;
}

Après ces manipulations, notre structure de fichiers deviendra :

/app/
- layout.jsx
- /users/
  - layout.jsx
  - /show/
    - page.jsx

Maintenant, si on accède à l'URL correspondante, NextJS assemblera tout et dans le navigateur nous obtiendrons le code HTML final suivant :

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				message for all users
			</div>
			
			<h1>User</h1>
			<p>
				user description
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Créez sur le site une section pour les utilisateurs et une section pour les articles. Créez dans chaque section votre propre disposition, qui héritera de la disposition principale du site.