Zagnieżdżone layouty w NextJS

Jak wiesz, w folderze /app w pliku /layout.jsx znajduje się główny layout strony.

W razie potrzeby, jednak, w zagnieżdżonych folderach można tworzyć własne layouty. W tym przypadku treść strony będzie najpierw wstawiana do zagnieżdżonego layoutu, a następnie otrzymany wynik zostanie wstawiony do głównego layoutu.

Spróbujmy w praktyce. Niech nasz główny layout ma następujący wygląd:

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

Zróbmy jeszcze jeden, zagnieżdżony layout dla wszystkich treści z folderu /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			wiadomość dla wszystkich użytkowników
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Jak widzisz, w tym layoucie nie podajemy podstawowych tagów strony, ponieważ są one już w naszym głównym layoucie strony.

Zróbmy również plik z treścią do pokazania użytkownika:

export default function User() {
	return <>
		<h1>Użytkownik</h1>
		<p>
			opis użytkownika
		</p>
	</>;
}

Po tych manipulacjach nasza struktura plików będzie wyglądać tak:

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

Teraz, jeśli przejdziemy pod odpowiedni URL, NextJS złoży wszystko razem i w przeglądarce otrzymamy następujący końcowy kod HTML:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				wiadomość dla wszystkich użytkowników
			</div>
			
			<h1>Użytkownik</h1>
			<p>
				opis użytkownika
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Zrób na stronie sekcję z użytkownikami i sekcję z postami. Zrób w każdej sekcji własny layout, który będzie dziedziczyć z głównego layoutu strony.