Transmetimi Dinamik i Metatëdhënave nga Përmbajtja në NextJS

Në mësimin e mëparshëm mësuam të vendosnim metatëdhënat në përmbajtjen e faqes. Kjo metodë është e mirë, por nuk zbatohet gjithmonë. Çështja është se metatëdhënat e faqes mund të ndryshojnë në varësi të parametrit të rrugës dinamike.

Le të shohim një shembull. Le të themi se kemi një skedar me përmbajtje për të shfaqur një përdorues sipas id të tij. Le të themi se në këtë skedar ka një grup me përdorues:

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

Le të shfaqim të dhënat e përdoruesit, që korrespondon me parametrin e transmetuar:

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

Le të kalojmë tani te problemi ynë. Meqenëse po shfaqim përdorues të ndryshëm, atëherë edhe metatëdhënat për ta duhet të jenë të ndryshme. Ne duhet t'i formësojmë ato në mënyrë dinamike, në varësi të vlerës së parametrit.

Kjo bëhet duke përdorur një funksion të veçantë generateMetadata, të cilin duhet ta eksportojmë nga komponenti ynë:

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

Në këtë funksion na janë të disponueshëm parametrat e rrugës:

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

Le të kthejmë metatëdhënat e duhura në varësi të vlerës së parametrit:

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

Krijoni një rrugë, që përpunon adresat të formës /post/:id, ku në vend të :id mund të jetë çdo numër.

Le të jetë dhënë grupi i mëposhtëm:

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

Bëni që për id-në e dhënë të shfaqet layout-i i duhur i postimit, si dhe të vendoset titulli i duhur dhe përshkrimi meta.