NextJS da kontentdan metama'lumotlarni dinamik uzatish

Oldingi darsda biz sayt kontentida metama'lumotlarni qanday belgilashni o'rgandik. Ushbu usul yaxshi, lekin har doim qo'llanilmaydi. Gap shundaki, sahifa metama'lumotlari dinamik yo'nalish parametriga bog'liq ravishda o'zgarishi mumkin.

Keling, buni misol bilan ko'rib chiqaylik. Faraz qilaylik, bizda uning id bo'yicha foydalanuvchini ko'rsatish uchun kontentli fayl bor. Faraz qilaylik, ushbu faylda foydalanuvchilar massivi mavjud:

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

Keling, uzatilgan parametrga mos keladigan foydalanuvchi ma'lumotlarini chiqaramiz:

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

Keling, endi muammomizga o'tamiz. Biz turli foydalanuvchilarni ko'rsatganimiz sababli, ular uchun metama'lumotlar ham har xil bo'lishi kerak. Biz ularni parametr qiymatiga bog'liq ravishda, dinamik shakllantirishimiz kerak.

Bu maxsus generateMetadata funksiyasi yordamida amalga oshiriladi, uni biz o'zimizning komponentimizdan eksport qilishimiz kerak:

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

Ushbu funksiyada bizga yo'nalish parametrlari mavjud:

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

Keling, parametr qiymatiga bog'liq ravishda kerakli metama'lumotlarni qaytaraylik:

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