Dele van die webwerf in komponente in NextJS

In die vorige les het ons die teks van die dele van die webwerf regstreeks in die lêer van die uitleg geskryf:

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

Dit kan egter ongerieflik wees in die geval waar die dele van die webwerf baie kode en teks bevat. Daarom word dele van die webwerf gewoonlik in afsonderlike komponentlêers geplaas.

Kom ons plaas byvoorbeeld die webwerf se kop in 'n afsonderlike komponent. Laat ons die ooreenstemmende lêer skep:

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

Laat ons ons komponent in die lêer met die uitleg invoer:

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

export default function RootLayout({children}) {
	
}

Laat ons die teks van ons komponent uitvoer deur 'n etiket met sy naam te gebruik:

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

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

Maak afsonderlike komponente vir die webwerf se kop- en voetskrif.