Parallel Routing di NextJS

Di NextJS, kita dapat membuat sebagian situs menampilkan konten yang berbeda tergantung pada URL yang diminta. Ini disebut parallel routing.

Mari kita lihat sebuah contoh. Anggaplah kita memiliki layout situs berikut:

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

Anggaplah kita ingin header menampilkan informasi dinamis. Misalnya, URL /users akan menampilkan komponen dengan pengguna, dan URL /posts komponen dengan postingan.

Untuk parallel routing seperti ini, kita perlu membuat folder khusus, dengan namanya diawali simbol @. Sebagai contoh, kita akan beri nama folder kita @info.

Di dalam folder ini, kita tempatkan dua komponen. Pertama untuk menampilkan pengguna di folder /users/, dan kedua untuk menampilkan postingan di folder /posts/. Struktur file kita akan menjadi seperti ini:

/app/
- /@info/
  - /users/
    - page.jsx
  - /posts/
    - page.jsx

Sekarang kita perlu menulis perintah khusus untuk penyisipan di layout situs. Untuk ini, kita perlu menggunakan slot dinamis khusus.

Untuk memahaminya, pertama-tama perhatikan parameter fungsi layout situs kita:

export default function RootLayout({children}) {
	return (
		
	);
}

Perhatikan bahwa parameternya adalah sebuah objek, dari mana kita mengekstrak konten situs ke dalam variabel children.

Objek ini bisa memiliki kunci lainnya. Kunci-kunci tersebut sesuai dengan folder yang namanya kita awali dengan @.

Dalam kasus kita, kita memiliki folder @info, yang berarti kita akan memiliki akses ke variabel info, yang tergantung pada URL akan berisi teks dari salah satu komponen - pengguna atau postingan. Mari kita dapatkan variabel ini:

export default function RootLayout({children, info}) {
	return (
		
	);
}

Sekarang di dalam markup layout, kita bisa menampilkan variabel info. Di tempat inilah, tergantung pada URL, teks dari salah satu komponen kita akan disisipkan:

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

Buatlah slot dinamis untuk sidebar kanan.

Buatlah slot dinamis untuk sidebar kiri.