Gnezdene postavitve v NextJS

Kot veste, v mapi /app v datoteki /layout.jsx se nahaja glavna postavitev spletnega mesta.

Po želji pa lahko v gnezdenih mapah ustvarite svoje postavitve. V tem primeru bo vsebina strani najprej vstavljena v gnezdeno postavitev, nato pa bo dobljeni rezultat vstavljen v glavno postavitev.

Poskusimo v praksi. Naj bo naša glavna postavitev naslednje oblike:

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

Naredimo še eno, gnezdeno postavitev za vse vsebine iz mape /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			sporočilo za vse uporabnike
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Kot lahko vidite, v tej postavitvi ne navajamo osnovnih oznak strani, ker so že v naši glavni postavitvi spletnega mesta.

Naredimo tudi datoteko z vsebino za prikaz uporabnika:

export default function User() {
	return <>
		<h1>Uporabnik</h1>
		<p>
			opis uporabnika
		</p>
	</>;
}

Po teh manipulacijah bo naša datotečna struktura videti takole:

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

Zdaj, če obiščemo ustrezen URL, bo NextJS vse sestavil skupaj in v brskalniku bomo dobili naslednjo končno HTML kodo:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				sporočilo za vse uporabnike
			</div>
			
			<h1>Uporabnik</h1>
			<p>
				opis uporabnika
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Na spletnem mestu naredite razdelek z uporabniki in razdelek s prispevki. V vsakem razdelku naredite svojo postavitev, ki bo podedovala od glavne postavitve spletnega mesta.