Diseños Anidados en NextJS

Como sabes, en la carpeta /app en el archivo /layout.jsx se encuentra el diseño principal del sitio.

Si se desea, sin embargo, en las carpetas anidadas se pueden crear diseños propios. En este caso el contenido de la página será primero insertado en el diseño anidado, y luego el resultado obtenido será insertado en el diseño principal.

Probemos en la práctica. Supongamos que nuestro diseño principal tiene la siguiente apariencia:

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

Hagamos otro, diseño anidado para todos los contenidos de la carpeta /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			mensaje para todos los usuarios
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Como ves, en este diseño no indicamos las etiquetas principales de la página, ya que ya están en nuestro diseño principal del sitio.

Hagamos también un archivo con contenido para mostrar al usuario:

export default function User() {
	return <>
		<h1>Usuario</h1>
		<p>
			descripción del usuario
		</p>
	</>;
}

Después de estas manipulaciones nuestra estructura de archivos se verá así:

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

Ahora, si accedemos a la URL correspondiente, NextJS juntará todo y en el navegador obtendremos el siguiente código HTML final:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				mensaje para todos los usuarios
			</div>
			
			<h1>Usuario</h1>
			<p>
				descripción del usuario
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Crea en el sitio una sección de usuarios y una sección de publicaciones. Crea en cada sección su propio diseño, que herede del diseño principal del sitio.