Dynamisk overførsel af metadata fra indhold i NextJS

I den forrige lektion lærte vi at indstille metadata i webstedets indhold. Denne metode er god, men ikke altid anvendelig. Problemet er, at sidens metadata kan ændre sig afhængigt af en parameter fra den dynamiske rute.

Lad os se på et eksempel. Antag, at vi har en fil med indhold til visning af en bruger baseret på deres id. Antag, at der i denne fil er en matrix med brugere:

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

Lad os vise brugerens data, der svarer til den overførte parameter:

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

Lad os nu gå videre til vores problem. Da vi viser forskellige brugere, skal deres metadata også være forskellige. Vi skal danne dem dynamisk, afhængigt af parameterværdien.

Dette gøres ved hjælp af en speciel funktion generateMetadata, som vi skal eksportere fra vores komponent:

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

I denne funktion har vi adgang til rutens parametre:

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

Lad os returnere de nødvendige metadata afhængigt af parameterværdien:

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  return {
    title: `Side for bruger {params.id}`,
    description: `Beskrivelse for bruger "{users[params.id]}"`,
  };
};

page.jsxlet posts = [
  {
    id: '1',
    title: 'indlæg 1',
    desc: 'beskrivelse for indlæg 1',
    text: 'tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1',
  },
  {
    id: '2',
    title: 'indlæg 2',
    desc: 'beskrivelse for indlæg 2',
    text: 'tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2',
  },
  {
    id: '3',
    title: 'indlæg 3',
    desc: 'beskrivelse for indlæg 3',
    text: 'tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3',
  },
];

export default function Post() {
  
}