Trasmissione dinamica dei metadati dal contenuto in NextJS

Nella lezione precedente abbiamo imparato a impostare i metadati nel contenuto del sito. Questo metodo è buono, ma non è sempre applicabile. Il fatto è che i metadati della pagina possono cambiare a seconda del parametro della rotta dinamica.

Diamo un'occhiata a un esempio. Supponiamo di avere un file con il contenuto per mostrare l'utente in base al suo id. Supponiamo che in questo file ci sia un array con gli utenti:

let users = [
	'user1',
	'user2',
	'user3',
	'user4',
	'user5',
];

Mostriamo i dati dell'utente, corrispondente al parametro passato:

export default function User({ params }) {
	return <>
		<h1>utente {params.id}</h1>
		<p>
			nome: {users[params.id]}
		</p>
	</>;
}

Passiamo ora al nostro problema. Poiché mostriamo utenti diversi, anche i metadati per loro dovrebbero essere diversi. Dovremmo formarli dinamicamente, a seconda del valore del parametro.

Questo viene fatto utilizzando una speciale funzione generateMetadata, che dobbiamo esportare dal nostro componente:

export const generateMetadata = () => {
	return {
		title: '',
		description: '',
	};
};

In questa funzione abbiamo accesso ai parametri della rotta:

export const generateMetadata = ({params}) => {
	console.log(params);
};

Restituiamo i metadati corretti in base al valore del parametro:

export const generateMetadata = ({params}) => {
	return {
		title: `Pagina per l'utente {params.id}`,
		description: `Descrizione per l'utente "{users[params.id]}"`,
	};
};

Crea una rotta che gestisca gli indirizzi del tipo /post/:id, dove invece di :id può esserci qualsiasi numero.

Supponiamo di avere il seguente array:

let posts = [
	{
		id: '1',
		title: 'post 1',
		desc: 'descrizione per il post 1',
		text: 'testo1 testo1 testo1 testo1 testo1 testo1 testo1 testo1',
	},
	{
		id: '2',
		title: 'post 2',
		desc: 'descrizione per il post 2',
		text: 'testo2 testo2 testo2 testo2 testo2 testo2 testo2 testo2',
	},
	{
		id: '3',
		title: 'post 3',
		desc: 'descrizione per il post 3',
		text: 'testo3 testo3 testo3 testo3 testo3 testo3 testo3 testo3',
	},
];

export default function Post() {
	
}

Fai in modo che per l'id specificato venga visualizzato il markup del post corretto, e che vengano impostati il titolo corretto e la meta descrizione.