Pengaliran Selari dalam NextJS

Dalam NextJS, anda boleh membuat sebahagian tapak menunjukkan kandungan yang berbeza bergantung pada URL yang diminta. Ini dipanggil pengaliran selari.

Mari kita lihat contoh. Katakan kita mempunyai susun atur tapak berikut:

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

Katakan kita mahu maklumat dinamik dipaparkan dalam pengepala. Katakan untuk URL /users, komponen dengan pengguna akan dipaparkan, dan untuk URL /posts, komponen dengan siaran akan dipaparkan.

Untuk pengaliran selari sedemikian, anda perlu membuat folder khas, menamakannya dengan simbol @. Sebagai contoh, mari kita namakan folder kita @info.

Dalam folder ini, kami akan meletakkan dua komponen. Pertama untuk memaparkan pengguna dalam folder /users/, dan yang kedua untuk memaparkan siaran dalam folder /posts/. Kami akan mendapat struktur fail berikut:

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

Sekarang kita perlu dalam susun atur tapak menulis arahan khas untuk sisipan. Untuk ini, anda perlu menggunakan slot dinamik khas.

Untuk memahami apa itu, mula-mula lihat pada parameter fungsi susun atur tapak kami:

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

Perhatikan bahawa parameter kepada kami adalah objek, dari mana kami mengekstrak kandungan tapak ke dalam pembolehubah children.

Mungkin ada kunci lain dalam objek ini. Mereka sepadan dengan folder yang namanya kami mulakan dengan @.

Dalam kes kami, kami mempunyai folder @info, yang bermaksud bahawa pembolehubah info akan tersedia, bergantung pada URL yang mengandungi teks salah satu komponen - pengguna atau siaran. Mari dapatkan pembolehubah ini:

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

Sekarang di dalam susun atur susun atur kami boleh memaparkan pembolehubah info. Di tempat ini, bergantung pada URL, teks salah satu komponen kami akan dimasukkan:

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

Buat slot dinamik untuk bar sisi kanan.

Buat slot dinamik untuk bar sisi kiri.