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:

app/users/[id]/page.jsxlet users = [
  'user1',
  'user2',
  'user3',
  'user4',
  'user5',
];

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

app/users/[id]/page.jsxexport 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:

src/app/test/page.jsxexport const generateMetadata = () => {
  return {
    title: '',
    description: '',
  };
};

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

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  console.log(params);
};

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

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

page.jsxlet 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() {
  
}