NextJS'te İçerikten Dinamik Meta Veri Aktarımı

Önceki derste, site içeriğinde meta verileri nasıl belirleyeceğimizi öğrendik. Bu yöntem iyidir, ancak her zaman uygulanamaz. Sorun şu ki, sayfanın meta verileri dinamik route parametresine bağlı olarak değişebilir.

Bir örnek üzerinden inceleyelim. Diyelim ki, kullanıcıyı id'ye göre göstermek için içerik dosyamız var. Bu dosyada kullanıcılardan oluşan bir dizi olduğunu varsayalım:

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

Şimdi, iletilen parametreye karşılık gelen kullanıcının verilerini gösterelim:

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

Şimdi problemimize geri dönelim. Farklı kullanıcıları gösterdiğimiz için, onlar için meta veriler de farklı olmalı. Bunları parametrenin değerine bağlı olarak dinamik bir şekilde oluşturmalıyız.

Bu, bileşenimizden dışa aktarmamız gereken özel bir generateMetadata fonksiyonu kullanılarak yapılır:

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

Bu fonksiyonda route parametreleri bize açıktır:

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

Parametre değerine bağlı olarak doğru meta verileri döndürelim:

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