Динамично предаване на метаданни от съдържанието в NextJS

В предишния урок се научихме да задаваме метаданни в съдържанието на сайта. Този метод е добър, но не винаги е приложим. Работата е там, че метаданните на страницата могат да се променят в зависимост от параметъра на динамичния маршрут.

Нека да разгледаме с пример. Да предположим, че имаме файл със съдържание за показване на потребител по неговия id. Да предположим, че в този файл има масив с потребители:

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

Нека да изведем данните за потребителя, съответстващ на подадения параметър:

export default function User({ params }) {
	return <>
		<h1>потребител {params.id}</h1>
		<p>
			име: {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() {
	
}

Направете така, че при зададено id да се извежда оформлението на съответния пост, както и да се задават правилното заглавие и метаописание.