Динамическая передача метаданных из контента в NextJS

В предыдущем уроке мы научились задавать метаданные в контенте сайта. Этот способ хорош, но применим не всегда. Дело в том, что метаданные страницы могут меняться в зависимости от параметра динамического роута.

Давайте посмотрим на примере. Пусть у нас есть файл с конентом для показа юзера по его id. Пусть в этом файле есть массив с юзерами:

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

Давайте выведем данные юзера, соответствующего переданному параметру:

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

Перейдем теперь к нашей проблеме. Так как мы показываем разных юзеров, то и метаданные для них должны быть разными. Мы должны формировать их динамически, в зависимости от значения параметра.

Это делается с помощью специальной функции generateMetadata, которую мы должны экспортировать из нашего компонента:

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

В этой функции нам доступны параметры роута:

export async function generateMetadata({ params }) {
	let routeParams = await params;
	console.log(routeParams);
}

Давайте будем отдавать нужные метаданные в зависимости от значения параметра:

export async function generateMetadata({ params }) {
	let { id } = await params;
	
	return {
		title: `Page for user ${id}`,
		description: `Description for user "${users[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() {
	
}

Сделайте так, чтобы по заданному айди выводилась верстка нужного поста, а также устанавливался правильный тайтл и метаописание.