Динамично преношење метаподатака из садржаја у 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 текст1',
  },
  {
    id: '2',
    title: 'објава 2',
    desc: 'опис за објаву 2',
    text: 'текст2 текст2 текст2 текст2 текст2 текст2 текст2 текст2',
  },
  {
    id: '3',
    title: 'објава 3',
    desc: 'опис за објаву 3',
    text: 'текст3 текст3 текст3 текст3 текст3 текст3 текст3 текст3',
  },
];

export default function Post() {
  
}