Dynamický prenos metadát z obsahu v NextJS

V predchádzajúcej lekcii sme sa naučili nastavovať metadáta v obsahu stránky. Tento spôsob je dobrý, ale nie vždy použiteľný. Problém je v tom, že metadáta stránky sa môžu meniť v závislosti od parametra dynamickej trasy.

Pozrime sa na príklad. Predpokladajme, že máme súbor s obsahom pre zobrazenie používateľa podľa jeho id. Nech v tomto súbore je pole s používateľmi:

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

Zobrazme dáta používateľa, ktorý zodpovedá odoslanému parametru:

export default function User({ params }) {
	return <>
		<h1>používateľ {params.id}</h1>
		<p>
			meno: {users[params.id]}
		</p>
	</>;
}

Prejdime teraz k nášmu problému. Keďže zobrazujeme rôznych používateľov, aj metadáta pre nich by mali byť rôzne. Musíme ich vytvoriť dynamicky, v závislosti od hodnoty parametra.

To sa robí pomocou špeciálnej funkcie generateMetadata, ktorú musíme exportovať z nášho komponentu:

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

V tejto funkcii sú nám dostupné parametre trasy:

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

Vráťme potrebné metadáta v závislosti od hodnoty parametra:

export const generateMetadata = ({params}) => {
	return {
		title: `Stránka pre používateľa {params.id}`,
		description: `Popis pre používateľa "{users[params.id]}"`,
	};
};

Vytvorte trasu, ktorá spracováva adresy tvaru /post/:id, kde namiesto :id môže byť ľubovoľné číslo.

Nech je dané nasledujúce pole:

let posts = [
	{
		id: '1',
		title: 'príspevok 1',
		desc: 'popis pre príspevok 1',
		text: 'text1 text1 text1 text1 text1 text1 text1 text1',
	},
	{
		id: '2',
		title: 'príspevok 2',
		desc: 'popis pre príspevok 2',
		text: 'text2 text2 text2 text2 text2 text2 text2 text2',
	},
	{
		id: '3',
		title: 'príspevok 3',
		desc: 'popis pre príspevok 3',
		text: 'text3 text3 text3 text3 text3 text3 text3 text3',
	},
];

export default function Post() {
	
}

Zabezpečte, aby pre zadané id bol vykreslený obsah príslušného príspevku, a zároveň bol nastavený správny titulok a meta popis.