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 ကို ပြုလုပ်ပါမည်-

export default function Prod({ params }) {
	console.log(params); // တန်ဖိုးများ၏ array
}

/prod/:category/:name ပုံစံရှိသော address များကို ကိုင်တွယ်သည့် route တစ်ခုကို ပြုလုပ်ပါ။

အောက်ပါ array ကို ထားပါစို့-

let 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,
	},
];

parameters များ၏တန်ဖိုးပေါ်မူတည်၍ component ၏ markup ထဲတွင် သက်ဆိုင်ရာ product ကို ဖော်ပြရန် ပြုလုပ်ပါ။