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