Transmiterea dinamică a metadatelor din conținut în NextJS

În lecția anterioară am învățat să setăm metadatele în conținutul site-ului. Această metodă este bună, dar nu este întotdeauna aplicabilă. Ideea este că metadatele paginii se pot schimba în funcție de parametrul rutei dinamice.

Să ne uităm la un exemplu. Să presupunem că avem un fișier cu conținut pentru afișarea utilizatorului după id-ul său. Să presupunem că în acest fișier există un array cu utilizatori:

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

Să afișăm datele utilizatorului corespunzător parametrului transmis:

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

Să trecem acum la problema noastră. Deoarece afișăm utilizatori diferiți, și metadatele pentru ei ar trebui să fie diferite. Trebuie să le formăm dinamic, în funcție de valoarea parametrului.

Acest lucru se face cu ajutorul unei funcții speciale generateMetadata, pe care trebuie să o exportăm din componenta noastră:

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

În această funcție avem acces la parametrii rutei:

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

Să returnăm metadatele necesare în funcție de valoarea parametrului:

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

Creați o rută care procesează adresele de tipul /post/:id, unde în loc de :id poate fi orice număr.

Să fie dat următorul 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() {
	
}

Faceți ca pentru id-ul specificat să fie afișat layout-ul postului necesar, precum și să fie setat titlul corect și descrierea meta.