Layout-uri Îmbricate în NextJS

După cum știți, în folderul /app în fișierul /layout.jsx se află layout-ul principal al site-ului.

Dacă se dorește, totuși, în folderele imbricate se pot crea propriile layout-uri. În acest caz, conținutul paginii va fi mai întâi introdus în layout-ul imbricat, iar apoi rezultatul obținut va fi introdus în layout-ul principal.

Să încercăm în practică. Să presupunem că layout-ul nostru principal are următoarea formă:

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

Să creăm încă un layout imbricat pentru toate conținuturile din folderul /users:

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

După cum vedeți, în acest layout nu specificăm tag-urile principale ale paginii, deoarece ele sunt deja prezente în layout-ul nostru principal al site-ului.

Să creăm de asemenea un fișier cu conținut pentru afișarea utilizatorului:

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

După aceste manipulări, structura noastră de fișiere va arăta astfel:

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

Acum, dacă accesăm URL-ul corespunzător, NextJS va asambla totul împreună și în browser vom obține următorul cod HTML final:

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

Creați pe site o secțiune cu utilizatori și o secțiune cu postări. Creați în fiecare secțiune propriul layout, care va moșteni de la layout-ul principal al site-ului.