Transmisión dinámica de metadatos desde el contenido en NextJS

En la lección anterior aprendimos a establecer metadatos en el contenido del sitio. Este método es bueno, pero no siempre es aplicable. El problema es que los metadatos de la página pueden cambiar dependiendo del parámetro de la ruta dinámica.

Veamos un ejemplo. Supongamos que tenemos un archivo con contenido para mostrar un usuario por su id. Supongamos que en este archivo hay un array con usuarios:

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

Mostremos los datos del usuario correspondiente al parámetro pasado:

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

Pasemos ahora a nuestro problema. Como mostramos diferentes usuarios, los metadatos para ellos también deben ser diferentes. Debemos formarlos dinámicamente, dependiendo del valor del parámetro.

Esto se hace usando una función especial generateMetadata, que debemos exportar desde nuestro componente:

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

En esta función tenemos acceso a los parámetros de la ruta:

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

Enviemos los metadatos correctos dependiendo del valor del parámetro:

export const generateMetadata = ({params}) => {
	return {
		title: `Page for user {params.id}`,
		description: `Description for user "{users[params.id]}"`,
	};
};

Cree una ruta que maneje direcciones del tipo /post/:id, donde en lugar de :id puede haber cualquier número.

Supongamos el siguiente array:

let posts = [
	{
		id: '1',
		title: 'post 1',
		desc: 'description for post 1',
		text: 'text1 text1 text1 text1 text1 text1 text1 text1',
	},
	{
		id: '2',
		title: 'post 2',
		desc: 'description for post 2',
		text: 'text2 text2 text2 text2 text2 text2 text2 text2',
	},
	{
		id: '3',
		title: 'post 3',
		desc: 'description for post 3',
		text: 'text3 text3 text3 text3 text3 text3 text3 text3',
	},
];

export default function Post() {
	
}

Haga que para un id dado se muestre el markup de la publicación correspondiente, y también se establezca el título correcto y la metadescripción.