Các phần của trang web trong component trong NextJS

Trong bài học trước, chúng ta đã viết nội dung của các phần trang web trực tiếp trong file layout:

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

Tuy nhiên, điều này có thể bất tiện trong trường hợp các phần của trang web chứa nhiều mã và nội dung. Vì vậy, thông thường các phần của trang web được tách ra thành các file component riêng biệt.

Làm ví dụ, hãy tách header của trang web thành một component riêng. Hãy tạo file tương ứng:

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

Import component của chúng ta vào file layout:

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

export default function RootLayout({children}) {
	
}

Hãy hiển thị nội dung của component chúng ta bằng thẻ với tên của nó:

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

Hãy tạo các component riêng biệt cho header và footer của trang web.