Bố cục lồng nhau trong NextJS

Như bạn đã biết, trong thư mục /app tại file /layout.jsx là bố cục chính của trang web.

Tuy nhiên, nếu muốn, trong các thư mục lồng nhau bạn có thể tạo các bố cục riêng. Trong trường hợp này, nội dung trang sẽ đầu tiên được chèn vào bố cục lồng nhau, và sau đó kết quả thu được sẽ được chèn vào bố cục chính.

Hãy thử thực hành. Giả sử bố cục chính của chúng ta có dạng như sau:

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 một bố cục lồng nhau khác cho tất cả nội dung từ thư mục /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			message for all users
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Như bạn thấy, trong bố cục này chúng ta không chỉ định các thẻ chính của trang, vì chúng đã có trong bố cục chính của trang web.

Hãy cũng tạo một file với nội dung để hiển thị user:

export default function User() {
	return <>
		<h1>User</h1>
		<p>
			user description
		</p>
	</>;
}

Sau các thao tác này, cấu trúc file của chúng ta sẽ trông như thế này:

/app/
- layout.jsx
- /users/
  - layout.jsx
  - /show/
    - page.jsx

Bây giờ, nếu truy cập vào URL tương ứng, NextJS sẽ tổng hợp tất cả lại và trong trình duyệt chúng ta sẽ nhận được mã HTML cuối cùng sau:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				message for all users
			</div>
			
			<h1>User</h1>
			<p>
				user description
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Tạo một phần người dùng trên trang web và một phần bài viết. Tạo trong mỗi phần bố cục riêng, sẽ kế thừa từ bố cục chính của trang web.