Dynamický přenos metadat z obsahu v NextJS

V předchozí lekci jsme se naučili nastavovat metadata v obsahu webu. Tento způsob je dobrý, ale ne vždy použitelný. Jde o to, že metadata stránky se mohou měnit v závislosti na parametru dynamické routy.

Podívejme se na příklad. Předpokládejme, že máme soubor s obsahem pro zobrazení uživatele podle jeho id. Předpokládejme, že v tomto souboru je pole s uživateli:

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

Zobrazme data uživatele, odpovídajícího předanému parametru:

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

Přejděme nyní k našemu problému. Protože zobrazujeme různé uživatele, metadata pro ně by také měla být různá. Musíme je vytvářet dynamicky, v závislosti na hodnotě parametru.

To se dělá pomocí speciální funkce generateMetadata, kterou musíme exportovat z naší komponenty:

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

V této funkci jsou nám dostupné parametry routy:

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

Předávejme potřebná metadata v závislosti na hodnotě parametru:

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

Vytvořte routu, která zpracovává adresy typu /post/:id, kde místo :id může být libovolné číslo.

Předpokládejme následující pole:

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

Zařiďte, aby se podle zadaného id zobrazilo správné HTML příspěvku, a také se nastavil správný titulek a meta popis.