Usambazaji wa Meta Data Kinyume na Maudhui Katika NextJS

Katika somo lililopita, tulijifunza jinsi ya kuweka meta data kwenye maudhui ya tovuti. Njia hii ni nzuri, lakini haitumiki kila wakati. Swala ni kwamba meta data ya ukurasa inaweza kubadilika kulingana na parameta ya njia ya mienendo.

Tuangalie kwa mfano. Tuchukulie tuna faili iliyo na maudhui ya kuonyesha mtumiaji kulingana na id yake. Tuchukulie kwenye faili hii kuna safu ya watumiaji:

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

Wacha tuonyeshe data ya mtumiaji, anayefanana na parameta iliyopitishwa:

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

Sasa tuendelee kwenye tatizo letu. Kwa kuwa tunaonyesha watumiaji tofauti, basi meta data yao pia inapaswa kuwa tofauti. Tunapaswa kuunda meta data kwa mienendo, kulingana na thamani ya parameta.

Hii inafanywa kwa kutumia utendaji maalum generateMetadata, ambayo tunapaswa kuitoa nje kutoka kwa sehemu yetu:

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

Katika utendaji huu, parameta za njia zinapatikana kwetu:

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

Wacha tutoe meta data inayohitajika kulingana na thamani ya parameta:

export const generateMetadata = ({params}) => {
	return {
		title: `Ukurasa wa mtumiaji {params.id}`,
		description: `Maelezo kwa mtumiaji "{users[params.id]}"`,
	};
};

Tengeneza njia, inayoshughulikia anwani za aina /post/:id, ambapo badala ya :id kunaweza kuwa nambari yoyote.

Tuchukulie kuna safu ifuatayo:

let posts = [
	{
		id: '1',
		title: 'post 1',
		desc: 'maelezo mafupi kwa post 1',
		text: 'maandishi1 maandishi1 maandishi1 maandishi1 maandishi1 maandishi1 maandishi1 maandishi1',
	},
	{
		id: '2',
		title: 'post 2',
		desc: 'maelezo mafupi kwa post 2',
		text: 'maandishi2 maandishi2 maandishi2 maandishi2 maandishi2 maandishi2 maandishi2 maandishi2',
	},
	{
		id: '3',
		title: 'post 3',
		desc: 'maelezo mafupi kwa post 3',
		text: 'maandishi3 maandishi3 maandishi3 maandishi3 maandishi3 maandishi3 maandishi3 maandishi3',
	},
];

export default function Post() {
	
}

Fanya ili kwa kitambulisho kilichowekwa muundo sahihi wa posta uonyeshwe, na vilevile kichwa sahihi na maelezo mafupi ya meta data yake iwekwe.