Bahagian Laman Web dalam Komponen NextJS

Dalam pelajaran sebelumnya, kami menulis teks bahagian laman web terus dalam fail susun atur:

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

Walau bagaimanapun, ini mungkin tidak sesuai apabila bahagian laman web mengandungi banyak kod dan teks. Oleh itu, bahagian laman web biasanya diasingkan ke dalam fail komponen yang berasingan.

Mari kita sebagai contoh mengasingkan header laman web ke dalam komponen berasingan. Mari buat fail yang sesuai:

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

Import komponen kami dalam fail susun atur:

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

export default function RootLayout({children}) {
	
}

Mari paparkan teks komponen kami menggunakan tag dengan namanya:

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

Buat komponen berasingan untuk header dan footer laman web.