Dynamisk överföring av metadata från innehåll i NextJS

I föregående lektion lärde vi oss att ställa in metadata i webbplatsens innehåll. Denna metod är bra, men inte alltid tillämpbar. Saken är den att sidans metadata kan ändras beroende på en parameter i den dynamiska routen.

Låt oss titta på ett exempel. Antag att vi har en fil med innehåll för att visa en användare baserat på hens id. Antag att det i denna fil finns en array med användare:

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

Låt oss visa data för den användare som motsvarar den skickade parametern:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <>
    <h1>användare {params.id}</h1>
    <p>
      namn: {users[params.id]}
    </p>
  </>;
}

Låt oss nu gå vidare till vårt problem. Eftersom vi visar olika användare, bör även metadata för dem vara olika. Vi måste forma dem dynamiskt, beroende på parameterns värde.

Detta görs med hjälp av en speciell funktion generateMetadata, som vi måste exportera från vår komponent:

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

I denna funktion har vi tillgång till routparametrar:

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

Låt oss returnera rätt metadata beroende på parameterns värde:

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  return {
    title: `Sida för användare {params.id}`,
    description: `Beskrivning för användare "{users[params.id]}"`,
  };
};

page.jsxlet posts = [
  {
    id: '1',
    title: 'inlägg 1',
    desc: 'beskrivning för inlägg 1',
    text: 'text1 text1 text1 text1 text1 text1 text1 text1',
  },
  {
    id: '2',
    title: 'inlägg 2',
    desc: 'beskrivning för inlägg 2',
    text: 'text2 text2 text2 text2 text2 text2 text2 text2',
  },
  {
    id: '3',
    title: 'inlägg 3',
    desc: 'beskrivning för inlägg 3',
    text: 'text3 text3 text3 text3 text3 text3 text3 text3',
  },
];

export default function Post() {
  
}