Contenu dans la mise en page du site avec NextJS

Examinons la mise en page principale du site, que nous avons commencé à analyser dans la leçon précédente :

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

Comme vous le voyez, la mise en page du site est un composant avec une fonction. En même temps, un objet est passé au paramètre de la fonction, à partir duquel nous extrayons la clé children dans la variable correspondante. Cette variable contient le contenu du fichier page.jsx, qui correspond à l'URL demandée.

C'est-à-dire que dans le fichier layout.jsx, nous avons la mise en page du site, et à l'aide de la variable children nous indiquons l'endroit dans la mise en page du site où le contenu de la page doit être inséré.

Par exemple, mettons le contenu de la page dans une balise :

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

Encadrez le contenu de votre site dans la balise main.