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:

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

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

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

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

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

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

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

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  return {
    title: `Page for user {params.id}`,
    description: `Description for user "{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() {
  
}