NextJS တွင် Dynamic Routes

NextJS တွင် dynamic routes များ ဖန်တီးနိုင်ပါသည်။ ထို routes များတွင် URL ၏ အစိတ်အပိုင်းတစ်ခုသည် မည်သည့်တန်ဖိုးမဆို ရှိနိုင်သည်ဟု ယူဆထားပါသည်။ ဥပမာအားဖြင့် /users/1 လိပ်စာကို ယူကြည့်ပါ၊ ၎င်းတွင် 1 နေရာတွင် မည်သည့်နံပါတ်မဆို ဖြစ်နိုင်ပြီး၊ နည်းပညာအရ user ၏ id နှင့် ကိုက်ညီကာ ကျွန်ုပ်တို့ ပြသလိုသော user ကို ကိုယ်စားပြုပါသည်။

ဤကိစ္စတွင် ဖြစ်နိုင်ခြေရှိသော နံပါတ်တစ်ခုစီအတွက် များစွာသောဖိုင်တွဲများ ဖန်တီးရန် မလိုအပ်ပါ။ ဤလိပ်စာ၏ ထိုအပိုင်းကို dynamic ဟု ကြေငြာရန် လုံလောက်ပါသည်။ ဤကိစ္စတွင် ဤပုံစံရှိသော တောင်းဆိုမှုအားလုံးကို အထွေထွေဖိုင် page.jsx က ကိုင်တွယ်ပါလိမ့်မည်။

Dynamic parameter တစ်ခု ပြုလုပ်ရန်အတွက်၊ သက်ဆိုင်ရာ ဖိုင်တွဲ၏ အမည်ကို စတုရန်းကွင်းများထဲသို့ ထည့်ရန် လိုအပ်ပါသည်။ ကျွန်ုပ်တို့၏ကိစ္စတွင် ၎င်းသည် အောက်ပါ ဖိုင်တွဲများ၏ ဖွဲ့စည်းပုံ ဖြစ်လိမ့်မည်။

/app/
- /users/
  - /[id]/

သက်ဆိုင်ရာ component တစ်ခု ပြုလုပ်ကြပါစို့။

export default function User() {
	return <p>
		user
	</p>;
}

ဤသို့ဖြင့် ကျွန်ုပ်တို့ သတ်မှတ်ထားသော parameter သည် အထူးအရာparams အတွင်း သိမ်းဆည်းထားပါလိမ့်မည်။ ထို parameter ၏ တန်ဖိုးကို ထုတ်ပြကြပါစို့။

export default function User({ params }) {
	return <p>
		user {params.id}
	</p>;
}

/city/:name ပုံစံရှိသော လိပ်စာများကို ကိုင်တွယ်သည့် route တစ်ခု ပြုလုပ်ပါ၊ ယင်းတွင် :name နေရာတွင် မည်သည့် string မဆို ဖြစ်နိုင်ပါသည်။

/show/:country/:city ပုံစံရှိသော လိပ်စာများကို ကိုင်တွယ်သည့် route တစ်ခု ပြုလုပ်ပါ၊ ယင်းတွင် :country နှင့် :city နေရာများတွင် မည်သည့် string မဆို ဖြစ်နိုင်ပါသည်။

/post/:id ပုံစံရှိသော လိပ်စာများကို ကိုင်တွယ်သည့် route တစ်ခု ပြုလုပ်ပါ၊ ယင်းတွင် :id နေရာတွင် မည်သည့်နံပါတ်မဆို ဖြစ်နိုင်ပါသည်။

အောက်ပါ array ကို ပေးထားပါသည်။

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

export default function Post() {
	
}

id parameter ၏ တန်ဖိုးပေါ် မူတည်၍ component ၏ layout တွင် သက်ဆိုင်ရာ post ကို ပြသအောင် ပြုလုပ်ပါ။

/prod/:id ပုံစံရှိသော လိပ်စာများကို ကိုင်တွယ်သည့် route တစ်ခု ပြုလုပ်ပါ၊ ယင်းတွင် :id နေရာတွင် မည်သည့်နံပါတ်မဆို ဖြစ်နိုင်ပါသည်။

အောက်ပါ array ကို ပေးထားပါသည်။

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

export default function Prod() {
	
}

id parameter ၏ တန်ဖိုးပေါ် မူတည်၍ component ၏ layout တွင် သက်ဆိုင်ရာ product ကို ပြသအောင် ပြုလုပ်ပါ။