NextJS හි අන්තර්ගතයෙන් ගතිකව පාර-දත්ත සම්ප්‍රේෂණය කිරීම

පෙර පාඩමේදී අපි වෙබ් අඩවි අන්තර්ගතයේ පාර-දත්ත සැකසීම ඉගෙන ගත්තෙමු. මෙම ක්‍රමය හොඳයි, නමුත් සෑම අවස්ථාවකම යෙදිය නොහැක. පිටුවේ පාර-දත්ත ගතික මාර්ගයේ පරාමිතිය අනුව වෙනස් විය හැකි බැවින් එයයි.

අපි උදාහරණයක් බලමු. අප සතුව එහි id අනුව පරිශීලකයෙකු පෙන්වීම සඳහා අන්තර්ගත ගොනුවක් ඇතැයි සිතමු. මෙම ගොනුව තුළ පරිශීලකයින්ගේ අරාවක් ඇතැයි සිතමු:

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

අපි සම්ප්‍රේෂණය කරන ලද පරාමිතියට අනුරූප වන පරිශීලකයාගේ දත්ත පෙන්වමු:

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

දැන් අපගේ ගැටලුව වෙත යමු. අපි විවිධ පරිශීලකයින් පෙන්වන බැවින්, ඔවුන් සඳහා පාර-දත්ත ද වෙනස් විය යුතුය. අපි ඒවා ගතිකව සකස් කළ යුතුය, පරාමිතියේ අගය අනුව.

මෙය සිදු කරනු ලබන්නේ විශේෂ ශ්‍රිතයක් generateMetadata මගිනි, එය අපගේ සංරචකයෙන් අපි අපනයනය කළ යුතුය:

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

මෙම ශ්‍රිතය තුළ මාර්ග පරාමිති අපට ලබා ගත හැකිය:

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

අපි අවශ්‍ය පාර-දත්ත පරාමිතියේ අගය අනුව ලබා දෙමු:

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

/post/:id ආකාරයේ ලිපින සකසන මාර්ගයක් සාදන්න, එහි :id වෙනුවට ඕනෑම අංකයක් විය හැකිය.

පහත අරාව ලබා දී ඇතැයි සිතමු:

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

දී ඇති අනන්‍ය හැඳුනුම්පත අනුව අනුරූප පොස්ට් එකේ අඩංගු කේතය පෙන්වීමටත්, නිවැරදි මාතෘකාව සහ පාර-විස්තරය සැකසීමටත් සාදන්න.