დინამიური მეტამონაცემების გადაცემა კონტენტიდან NextJS-ში

წინა გაკვეთილზე ჩვენ ვისწავლით, როგორ დაგვეთანხმებინა მეტამონაცემები საიტის კონტენტში. ეს მეთოდი კარგია, მაგრამ ყოველთვის არ არის გამოყენებადი. საქმე ისაა, რომ გვერდის მეტამონაცემები შეიძლება შეიცვალოს დინამიური მარშრუტის პარამეტრიდან გამომდინარე.

მაგალითით ვნახოთ. დავუშვათ, გვაქვს ფაილი კონტენტით მომხმარებლის მისი id-ით საჩვენებლად. დავუშვათ, ამ ფაილში არის მომხმარებლების მასივი:

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

გამოვიტანოთ მომხმარებლის მონაცემები, რომელიც შეესაბამება გადაცემულ პარამეტრს:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <>
    <h1>მომხმარებელი {params.id}</h1>
    <p>
      სახელი: {users[params.id]}
    </p>
  </>;
}

ახლა კი გადავიდეთ ჩვენს პრობლემაზე. რადგან ჩვენ სხვადასხვა მომხმარებელს ვაჩვენებთ, მათთვის მეტამონაცემებიც სხვადასხვა უნდა იყოს. ჩვენ მათ დინამიურად უნდა ჩამოვაყალიბოთ, პარამეტრის მნიშვნელობიდან გამომდინარე.

ეს კეთდება სპეციალური ფუნქციის generateMetadata-ის მეშვეობით, რომელიც ჩვენ უნდა ექსპორტირებული გვქონდეს ჩვენი კომპონენტიდან:

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

ამ ფუნქციაში ჩვენთვის ხელმისაწვდომია მარშრუტის პარამეტრები:

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

მოდით, მივაწოდოთ საჭირო მეტამონაცემები პარამეტრის მნიშვნელობიდან გამომდინარე:

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  return {
    title: `გვერდი მომხმარებლისთვის {params.id}`,
    description: `აღწერა მომხმარებლისთვის "{users[params.id]}"`,
  };
};

page.jsxlet posts = [
  {
    id: '1',
    title: 'პოსტი 1',
    desc: 'აღწერა პოსტი 1-ისთვის',
    text: 'ტექსტი1 ტექსტი1 ტექსტი1 ტექსტი1 ტექსტი1 ტექსტი1 ტექსტი1',
  },
  {
    id: '2',
    title: 'პოსტი 2',
    desc: 'აღწერა პოსტი 2-ისთვის',
    text: 'ტექსტი2 ტექსტი2 ტექსტი2 ტექსტი2 ტექსტი2 ტექსტი2 ტექსტი2',
  },
  {
    id: '3',
    title: 'პოსტი 3',
    desc: 'აღწერა პოსტი 3-ისთვის',
    text: 'ტექსტი3 ტექსტი3 ტექსტი3 ტექსტი3 ტექსტი3 ტექსტი3 ტექსტი3',
  },
];

export default function Post() {
  
}