Geneste lay-outs in NextJS

Zoals je weet, bevindt zich in de map /app in het bestand /layout.jsx de hoofdlay-out van de website.

Indien gewenst, kunnen er echter in geneste mappen eigen lay-outs worden gemaakt. In dat geval wordt de inhoud van de pagina eerst in de geneste lay-out geplaatst, en vervolgens wordt het resulterende resultaat in de hoofdlay-out geplaatst.

Laten we het in de praktijk proberen. Stel dat onze hoofdlay-out er als volgt uitziet:

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

Laten we nog een, geneste lay-out maken voor alle inhoud uit de map /users:

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

Zoals je ziet, specificeren we in deze lay-out niet de hoofdtags van de pagina, omdat deze al in onze hoofdlay-out van de website aanwezig zijn.

Laten we ook een bestand met inhoud maken om de gebruiker te tonen:

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

Na deze manipulaties zal onze bestands- structuur er als volgt uitzien:

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

Nu, als we de corresponderende URL bezoeken, zal NextJS alles samenvoegen en in de browser krijgen we de volgende uiteindelijke HTML-code:

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

Maak een sectie voor gebruikers en een sectie voor posts op de website. Maak in elke sectie een eigen lay-out die overerft van de hoofdlay-out van de website.