Dynaaminen metatietojen välittäminen sisällöstä NextJS:ssä

Edellisessä oppitunnissa opimme asettamaan metatiedot sivuston sisällössä. Tämä menetelmä on hyvä, mutta ei aina sovellettavissa. Asia on, että sivun metatiedot voivat muuttua dynaamisen reitin parametrista riippuen.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on sisältötiedosto käyttäjän näyttämiseksi heidän id:nsä perusteella. Oletetaan, että tässä tiedostossa on taulukko käyttäjistä:

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

Näytetään käyttäjän tiedot, jotka vastaavat annettua parametria:

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

Siirrytään nyt ongelmaamme. Koska näytämme eri käyttäjiä, niin heidän metatietonsa pitäisi olla erilaiset. Meidän täytyy muodostaa ne dynaamisesti, parametrin arvosta riippuen.

Tämä tehdään erityisellä funktiolla generateMetadata, joka meidän on eksportattava komponentistamme:

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

Tässä funktiossa meille ovat saatavilla reitin parametrit:

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

Palautetaan tarvittavat metatiedot parametrin arvosta riippuen:

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