Parties du site dans les composants dans NextJS

Dans la leçon précédente, nous avons écrit le texte des parties du site directement dans le fichier de mise en page :

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

Cependant, cela peut être peu pratique dans le cas où les parties du site contiennent beaucoup de code et de texte. Par conséquent, généralement, les parties du site sont extraites dans des fichiers séparés de composants.

Prenons par exemple l'extraction de l'en-tête du site dans un composant séparé. Créons le fichier correspondant :

export default function Header() {
	return <>
		header
	</>;
}

Importons notre composant dans le fichier de mise en page :

import Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
	
}

Affichons le texte de notre composant à l'aide de la balise portant son nom :

import Header from '@/comp/header/header.jsx';

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

Créez des composants séparés pour l'en-tête et le pied de page du site.