NextJS တွင် Dynamic Route အတွင်းရှိ Segment Array

လိုအပ်ပါက segment အားလုံးကို variable တစ်ခုထဲသို့ array အဖြစ် ရယူနိုင်ပါသည်။ ထိုသို့ပြုလုပ်ရန် parameter ကို ထောင့်ကွင်းစတုဂံအတွင်းထားပြီး parameter အမည်ရှေ့တွင် ellipsis (…) ထည့်ရပါမည်။ ဥပမာတစ်ခုဖြင့် ကြည့်ရအောင်။

အောက်ပါပုံစံရှိသော route တစ်ခုရှိသည်ဆိုပါစို့- /prod/:category/:name/:id/၊ ဤနေရာတွင် colon (:) ဖြင့်မှတ်သားထားသော parameters များသည် dynamic ဖြစ်သည်။ ထို parameters များ၏တန်ဖိုးများကို array အဖြစ် variable တစ်ခုခုထဲသို့ ရယူကြပါစို့။ ထို variable ၏အမည်သည် မည်သည့်အရာမဆိုဖြစ်နိုင်သည်။ ဥပမာအားဖြင့်၊ ၎င်းကို slugs ဟုခေါ်မည်။

အောက်ပါဖိုင်ဖွဲ့စည်းပုံကို ပြုလုပ်ကြပါစို့-

• /app//prod//[...slugs]/

သက်ဆိုင်ရာ component ကို ပြုလုပ်ပါမည်-

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // တန်ဖိုးများ၏ array
}

page.jsxlet prods = [
  {
    category: 'catg1',
    name: 'prod1',
    cost: 100,
  },
  {
    category: 'catg1',
    name: 'prod2',
    cost: 200,
  },
  {
    category: 'catg2',
    name: 'prod1',
    cost: 300,
  },
  {
    category: 'catg2',
    name: 'prod3',
    cost: 400,
  },
];