NextJS-de mazmunyňyzdan metamağlumatlary dinamiki geçirmek

Öňki sapakda biz saýtyň mazmunynda metamağlumatlary düzmegi öwrendik. Bu usul gowy, ýöne her wagt ulanmak mümkin däl. Sebäbi sahypanyň metamağlumatlary dynamik ýol parametrine baglylykda üýtgedip bilner.

Geliň mysal bilen göreli. Bizde ulanyjyny onuň id boýunça görkezmek üçin mazmunly faýl bar bolsun. Bu faýlda ulanyjylar bilen massiw bar bolsun:

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

Geliň berlen parametre laýyk gelýän ulanyjynyň maglumatlaryny çykaralyň:

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

Indi problemamyza geçeliň. Biz dürli ulanyjylary görkezýäňiz ýaly, olara degişli metamağlumatlar hem dürli bolmaly. Biz olary parametriň bahasyna baglylykda, dynamiki görnüşde düzmeli.

Bu ýörite generateMetadata funksiýasy arkaly amala aşyrylýar, ony biz öz komponentimizden eksport etmeli:

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

Bu funksiýada ýol parametrleri bize elýeter:

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

Geliň parametriň bahasyna baglylykda gerekli metamağlumatlary gaýtaryşdýralyň:

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  return {
    title: `Ulanyjy {params.id} üçin sahypa`,
    description: `"{users[params.id]}" ulanyjysy üçin düşündiriş`,
  };
};

page.jsxlet posts = [
  {
    id: '1',
    title: 'post 1',
    desc: '1-nji post üçin düşündiriş',
    text: 'tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1',
  },
  {
    id: '2',
    title: 'post 2',
    desc: '2-nji post üçin düşündiriş',
    text: 'tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2',
  },
  {
    id: '3',
    title: 'post 3',
    desc: '3-nji post üçin düşündiriş',
    text: 'tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3',
  },
];

export default function Post() {
  
}