Geneste uitlegte in NextJS

Soos jy weet, in die gids /app in die lêer /layout.jsx is die hoofuitleg van die webwerf geleë.

Indien verlang, kan jy egter in geneste gidse jou eie uitlegte skep. In hierdie geval sal die bladsy-inhoud eers in die geneste uitleg geplaas word, en dan sal die resultaat wat verkry is in die hoofuitleg geplaas word.

Kom ons probeer dit in die praktyk. Laat ons hoofuitleg die volgende voorkoms hê:

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

Kom ons maak nog 'n, geneste uitleg vir alle inhoud uit die gids /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			boodskap vir alle gebruikers
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Soos jy kan sien, in hierdie uitleg spesifiseer ons nie die hoof bladsy etikette nie, aangesien hulle reeds in ons hoof webwerf-uitleg is.

Kom ons maak ook 'n lêer met inhoud om die gebruiker te wys:

export default function User() {
	return <>
		<h1>Gebruiker</h1>
		<p>
			gebruiker beskrywing
		</p>
	</>;
}

Na hierdie manipulasies sal ons lêer struktuur so lyk:

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

Nou, as jy na die ooreenstemmende URL gaan, NextJS sal alles saamstel en in die blaaier sal ons die volgende finale HTML kode kry:

<html lang="en">
	<body>
		<header>
			kop
		</header>
		<main>
			<div class="info">
				boodskap vir alle gebruikers
			</div>
			
			<h1>User</h1>
			<p>
				user description
			</p>
		</main>
		<footer>
			voetskrif
		</footer>
	</body>
</html>

Maak 'n afdeling met gebruikers en 'n afdeling met plasings op die webwerf. Maak in elke afdeling jou eie uitleg wat sal oorerf van die hoof webwerf-uitleg.