Parti del sito nei componenti in NextJS

Nella lezione precedente abbiamo scritto il testo delle parti del sito direttamente nel file di layout:

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

Tuttavia, questo potrebbe essere scomodo nel caso in cui le parti del sito contengano molto codice e testo. Pertanto, di solito le parti del sito vengono messe in file separati di componenti.

Ad esempio, mettiamo l'header del sito in un componente separato. Creiamo il file corrispondente:

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

Importiamo il nostro componente nel file con il layout:

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

export default function RootLayout({children}) {
	
}

Visualizziamo il testo del nostro componente utilizzando il tag con il suo nome:

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>
	);
}

Crea componenti separati per l'header e il footer del sito.