Layout Nidificati in NextJS

Come sai, nella cartella /app nel file /layout.jsx si trova il layout principale del sito.

Tuttavia, se lo si desidera, nelle cartelle nidificate è possibile creare layout propri. In questo caso, il contenuto della pagina verrà prima inserito nel layout nidificato, e poi il risultato ottenuto verrà inserito nel layout principale.

Proviamo nella pratica. Supponiamo che il nostro layout principale abbia il seguente aspetto:

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

Creiamo un altro layout nidificato per tutti i contenuti della cartella /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			messaggio per tutti gli utenti
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Come puoi vedere, in questo layout non specifichiamo i tag principali della pagina, poiché sono già presenti nel nostro layout principale del sito.

Creiamo anche un file con il contenuto per visualizzare l'utente:

export default function User() {
	return <>
		<h1>Utente</h1>
		<p>
			descrizione utente
		</p>
	</>;
}

Dopo queste manipolazioni, la nostra struttura dei file diventerà così:

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

Ora, se si accede all'URL corrispondente, NextJS metterà tutto insieme e nel browser otterremo il seguente codice HTML finale:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				messaggio per tutti gli utenti
			</div>
			
			<h1>Utente</h1>
			<p>
				descrizione utente
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Crea una sezione per gli utenti e una per i posti sul sito. Crea in ogni sezione un layout proprio, che erediterà dal layout principale del sito.