Nội dung trong bố cục trang web NextJS

Hãy xem xét bố cục chính của trang web, mà chúng ta đã bắt đầu phân tích trong bài học trước:

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

Như bạn thấy, bố cục trang web đại diện cho một component với một hàm. Trong đó một object được truyền vào tham số hàm, từ đó chúng ta trích xuất khóa children vào biến tương ứng. Trong biến này lưu trữ nội dung của file page.jsx, tương ứng với URL được yêu cầu.

Tức là trong file layout.jsx của chúng ta lưu trữ bố cục trang web, và thông qua biến children chúng ta chỉ định vị trí trong bố cục trang web, nơi mà nội dung của trang cần được chèn vào.

Ví dụ, hãy định dạng nội dung trang trong một thẻ nào đó:

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

Hãy định dạng nội dung trang web của bạn trong thẻ main.