Sisäkkäiset asettelut NextJS:ssä

Kuten tiedät, kansiossa /app tiedostossa /layout.jsx sijaitsee sivuston pääasettelu.

Haluttaessa voidaan kuitenkin sisäkkäisissä kansioissa luoda omia asetteluja. Tällöin sivun sisältö lisätään ensin sisäkkäiseen asetteluun, ja saatava tulos lisätään sitten pääasetteluun.

Kokeillaan käytännössä. Olkoon pääasettelumme seuraavan näköinen:

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

Tehdään toinen, sisäkkäinen asettelu kaikille sisällöille kansiosta /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			viesti kaikille käyttäjille
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Kuten näet, tässä asettelussa emme määritä sivun perustageja, koska ne ovat jo sivustomme pääasettelussa.

Tehdään myös tiedosto käyttäjän näyttämisen sisällölle:

export default function User() {
	return <>
		<h1>Käyttäjä</h1>
		<p>
			käyttäjän kuvaus
		</p>
	</>;
}

Näiden toimenpiteiden jälkeen tiedostorakenteemme näyttää tältä:

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

Nyt, jos siirrytään vastaavaan URL-osoitteeseen, NextJS kokoaa kaiken yhteen ja selaimessa saamme seuraavan lopullisen HTML-koodin:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				viesti kaikille käyttäjille
			</div>
			
			<h1>Käyttäjä</h1>
			<p>
				käyttäjän kuvaus
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Tee sivustolle osio käyttäjille ja osio julkaisuille. Tee kumpaankin osioon oma asettelu, joka perii sivuston pääasettelusta.