Layout Bersarang di NextJS

Seperti yang Anda ketahui, di folder /app di file /layout.jsx terdapat layout utama situs web.

Jika diinginkan, namun, di dalam folder bersarang dapat dibuat layout sendiri. Dalam hal ini, konten halaman akan pertama dimasukkan ke dalam layout bersarang, dan kemudian hasil yang didapat akan dimasukkan ke dalam layout utama.

Mari kita coba dalam praktik. Misalkan layout utama kita memiliki tampilan berikut:

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

Mari kita buat satu lagi, layout bersarang untuk semua konten dari folder /users:

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

Seperti yang Anda lihat, di layout ini kami tidak menunjukkan tag utama halaman, karena mereka sudah ada di layout utama situs web kami.

Mari kita buat juga file dengan konten untuk menampilkan pengguna:

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

Setelah manipulasi ini, struktur file kami akan terlihat seperti ini:

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

Sekarang, jika mengakses URL yang sesuai, NextJS akan mengumpulkan semuanya dan di browser kita akan mendapatkan kode HTML akhir berikut:

<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>

Buatlah bagian pengguna di situs web dan bagian dengan postingan. Buatlah di setiap bagian layout sendiri, yang akan mewarisi dari layout utama situs web.