NextJS တွင် အကြောင်းအရာမှ မေတာဒေတာများကို ဒိုင်းနမစ်အလိုက် လွှဲပြောင်းခြင်း

ယခင်သင်ခန်းစာတွင် ဆိုက်အကြောင်းအရာထဲတွင် မေတာဒေတာများ သတ်မှတ်နည်းကို သင်ယူခဲ့ပါသည်။ ဤနည်းလမ်းသည် ကောင်းသော်လည်း အမြဲတမ်း အသုံးဝင်မည် မဟုတ်ပါ။ အကြောင်းမှာ စာမျက်နှာ မေတာဒေတာများသည် ဒိုင်းနမစ် route ၏ parameter အပေါ် မူတည်၍ ပြောင်းလဲနိုင်သောကြောင့် ဖြစ်ပါသည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ရှုကြပါစို့။ သူ၏ id အလိုက် user ကိုပြသရန် အကြောင်းအရာဖိုင်ရှိသည်ဟု ဆိုကြပါစို့။ ထိုဖိုင်ထဲတွင် user များပါဝင်သော array တစ်ခု ရှိသည်ဟု ဆိုကြပါစို့။

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

ပေးပို့ထားသော parameter နှင့် ကိုက်ညီသည့် user ၏ အချက်အလက်များကို ထုတ်ပြကြပါစို့။

app/users/[id]/page.jsxexport default function User({ params }) {
  return <>
    <h1>user {params.id}</h1>
    <p>
      name: {users[params.id]}
    </p>
  </>;
}

ယခုတွင် ကျွန်ုပ်တို့၏ ပြဿနာဆီသို့ ပြန်သွားကြပါစို့။ ကျွန်ုပ်တို့သည် user အမျိုးမျိုးကို ပြသသောကြောင့် ၎င်းတို့အတွက် မေတာဒေတာများလည်း ကွဲပြားသင့်ပါသည်။ ကျွန်ုပ်တို့သည် ၎င်းတို့ကို parameter ၏တန်ဖိုးအပေါ် မူတည်၍ ဒိုင်းနမစ်အလိုက် ဖွဲ့စည်းသင့်ပါသည်။

ဤသည်ကို ကျွန်ုပ်တို့၏ component မှ တင်ပို့ရမည့် အထူး function generateMetadata ကို အသုံးပြု၍ လုပ်ဆောင်သည်။

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

ဤ function ထဲတွင် route parameters များကို ရယူနိုင်ပါသည်။

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

Parameter ၏တန်ဖိုးအပေါ် မူတည်၍ လိုအပ်သော မေတာဒေတာများကို ပြန်ပေးကြပါစို့။

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