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