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

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

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

let users = [
	'user1',
	'user2',
	'user3',
	'user4',
	'user5',
];

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

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

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

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

export const generateMetadata = () => {
	return {
		title: '',
		description: '',
	};
};

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

export const generateMetadata = ({params}) => {
	console.log(params);
};

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

export const generateMetadata = ({params}) => {
	return {
		title: `Page for user {params.id}`,
		description: `Description for user "{users[params.id]}"`,
	};
};

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

အောက်ပါ array ကို ပေးထားသည်ဟု ဆိုကြပါစို့။

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

ပေးထားသော id အလိုက် သင့်လျော်သော post ၏ ပြင်ဆင်မှု (markup) ကို ထုတ်ပြခြင်း၊ ထို့အပြင် မှန်ကန်သော ခေါင်းစဉ်နှင့် မက်တာအဖော်ပြချက်များ သတ်မှတ်ခြင်းတို့ကို ပြုလုပ်ပါ။