Contenido en el diseño del sitio en NextJS

Consideremos el diseño principal del sitio, que comenzamos a analizar en la lección anterior:

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

Como puedes ver, el diseño del sitio es un componente con una función. Al mismo tiempo, un objeto se pasa al parámetro de la función, del cual extraemos la clave children en la variable correspondiente. En esta variable se almacena el contenido del archivo page.jsx, que corresponde a la URL solicitada.

Es decir, en el archivo layout.jsx se almacena el diseño del sitio, y mediante la variable children indicamos el lugar en el diseño del sitio en el que debe insertarse el contenido de la página.

Por ejemplo, vamos a envolver el contenido de la página en alguna etiqueta:

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

Envuelve el contenido de tu sitio en la etiqueta main.