Transmissão Dinâmica de Metadados do Conteúdo no NextJS

Na lição anterior, aprendemos a definir metadados no conteúdo do site. Esse método é bom, mas não é aplicável sempre. A questão é que os metadados da página podem mudar dependendo de um parâmetro de rota dinâmica.

Vamos ver um exemplo. Suponha que temos um arquivo de conteúdo para exibir um usuário pelo seu id. Suponha que neste arquivo haja um array com usuários:

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

Vamos exibir os dados do usuário correspondente ao parâmetro passado:

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

Vamos agora ao nosso problema. Como estamos exibindo usuários diferentes, os metadados para eles também devem ser diferentes. Precisamos formá-los dinamicamente, dependendo do valor do parâmetro.

Isso é feito usando uma função especial generateMetadata, que devemos exportar do nosso componente:

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

Nesta função, os parâmetros de rota estão disponíveis para nós:

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

Vamos retornar os metadados corretos dependendo do valor do parâmetro:

export const generateMetadata = ({params}) => {
	return {
		title: `Página para o usuário {params.id}`,
		description: `Descrição para o usuário "{users[params.id]}"`,
	};
};

Crie uma rota que processe URLs do tipo /post/:id, onde em vez de :id pode ser qualquer número.

Suponha o seguinte 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() {
	
}

Faça com que, para um ID fornecido, seja renderizado o HTML do post correto, e também seja definido o título e a meta descrição corretos.