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

Во претходната лекција научивме како да ги поставиме метаподатоците во содржината на веб-страницата. Овој метод е добар, но не е секогаш применлив. Работата е што метаподатоците на страницата може да се менуваат во зависност од параметарот на динамичкиот пат.

Да го погледнеме примерот. Да претпоставиме дека имаме датотека со содржина за приказ на корисник според неговиот id. Да претпоставиме дека во оваа датотека има низа со корисници:

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

Ајде да ги прикажеме податоците за корисникот, кој одговара на пренесениот параметар:

export default function User({ params }) {
	return <>
		<h1>user {params.id}</h1>
		<p>
			name: {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 да се прикаже html-кодот на соодветниот пост, како и да се постави точниот наслов и мета-опишување.