Routing Parallelo in NextJS

In NextJS è possibile fare in modo che una parte del sito mostri contenuti diversi a seconda dell'URL richiesto. Questo si chiama routing parallelo.

Diamo un'occhiata a un esempio. Supponiamo di avere il seguente layout del sito:

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

Supponiamo di voler visualizzare informazioni dinamiche nell'header. Supponiamo che all'URL /users venga visualizzato un componente con gli utenti, e all'URL /posts un componente con i post.

Per questo routing parallelo è necessario creare una cartella speciale, iniziando il suo nome con il simbolo @. Per l'esempio, chiamiamo la nostra cartella @info.

In questa cartella posizioneremo due componenti. Il primo per visualizzare gli utenti nella cartella /users/, e il secondo per visualizzare i post nella cartella /posts/. Otterremo la seguente struttura di file:

/app/
- /@info/
  - /users/
    - page.jsx
  - /posts/
    - page.jsx

Ora dobbiamo scrivere un comando speciale per l'inserimento nel layout del sito. Per fare questo è necessario utilizzare uno speciale slot dinamico.

Per capire di cosa si tratta, per prima cosa osservate il parametro della funzione del nostro layout del sito:

export default function RootLayout({children}) {
	return (
		
	);
}

Notate che il parametro ci viene passato come un oggetto, dal quale estriamo il contenuto del sito nella variabile children.

In questo oggetto possono esserci altre chiavi. Corrispondono alle cartelle il cui nome inizia con @.

Nel nostro caso abbiamo la cartella @info, il che significa che avremo a disposizione la variabile info, che a seconda dell'URL conterrà il testo di uno dei componenti - utenti o post. Recuperiamo questa variabile:

export default function RootLayout({children, info}) {
	return (
		
	);
}

Ora all'interno del markup del layout possiamo visualizzare la variabile info. In questo punto, a seconda dell'URL, verrà inserito il testo di uno dei nostri componenti:

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

Crea uno slot dinamico per la sidebar destra.

Crea uno slot dinamico per la sidebar sinistra.