Դինամիկ մետատվյալների փոխանցում բովանդակությունից NextJS-ում

Նախորդ դասում մենք սովորեցինք կայքի բովանդակության մեջ մետատվյալներ նշելու եղանակը: Այս մեթոդը լավ է, բայց միշտ չէ, որ կիրառելի է: Բանն այն է, որ էջի մետատվյալները կարող են փոխվել կախված դինամիկ երթուղու պարամետրից:

Դիտարկենք օրինակով: Ենթադրենք, մենք ունենք բովանդակության ֆայլ օգտագործողին նրա id-ով ցույց տալու համար: Ենթադրենք, այս ֆայլում կա օգտագործողների զանգված.

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

Ցույց տանք տրված պարամետրին համապատասխանող օգտագործողի տվյալները.

app/users/[id]/page.jsxexport default function User({ params }) {
  return <>
    <h1>user {params.id}</h1>
    <p>
      name: {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: `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() {
  
}