Vnorené layouty v NextJS

Ako viete, v priečinku /app v súbore /layout.jsx sa nachádza hlavný layout stránky.

V prípade potreby je však možné v podpriečinkoch vytvoriť vlastné layouty. V takom prípade sa obsah stránky najprv vloží do vnoreného layoutu a výsledok sa následne vloží do hlavného layoutu.

Vyskúšajme si to v praxi. Predpokladajme, že náš hlavný layout vyzerá nasledovne:

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

Vytvorme ďalší, vnorený layout pre všetky obsahy z priečinka /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			správa pre všetkých používateľov
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Ako vidíte, v tomto layoute neuvádzame základné štruktúrne tagy stránky, pretože sú už obsiahnuté v hlavnom layoute stránky.

Vytvorme tiež súbor s obsahom pre zobrazenie používateľa:

export default function User() {
	return <>
		<h1>Používateľ</h1>
		<p>
			popis používateľa
		</p>
	</>;
}

Po týchto úpravách bude naša štruktúra súborov vyzerať nasledovne:

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

Teraz, pri prístupu na príslušnú URL adresu, NextJS všetko zloží dohromady a v prehliadači dostaneme nasledujúci výsledný HTML kód:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				správa pre všetkých používateľov
			</div>
			
			<h1>Používateľ</h1>
			<p>
				popis používateľa
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Vytvorte na stránke sekciu pre používateľov a sekciu pre príspevky. V každej sekcii vytvorte vlastný layout, ktorý bude dediť od hlavného layoutu stránky.