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:

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

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

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

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

In questa funzione abbiamo accesso ai parametri della rotta:

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

Restituiamo i metadati corretti in base al valore del parametro:

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

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