Dünaamiline metade edastamine sisust NextJS-is

Eelmises õppetükis õppisime määrama saidisisu metaandmeid. See meetod on hea, kuid alati ei ole rakendatav. Asi on selles, et lehe metaandmed võivad muutuda sõltuvalt dünaamilise route'i parameetrist.

Vaatame seda näite varal. Oletame, et meil on fail sisuga kasutaja kuvamiseks tema id järgi. Oletame, et selles failis on massiiv kasutajatega:

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

Kuvame kasutaja andmed, vastavalt edastatud parameetrile:

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

Liigume nüüd oma probleemi juurde. Kuna me kuvame erinevaid kasutajaid, siis ka nende metaandmed peaksid olema erinevad. Me peame need dünaamiliselt moodustama, sõltuvalt parameetri väärtusest.

See tehakse spetsiaalse funktsiooni generateMetadata abil, mille me peame eksportima oma komponendist:

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

Selles funktsioonis on meile kättesaadavad route'i parameetrid:

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

Anname vajalikud metaandmed vastavalt parameetri väärtusele:

export const generateMetadata = ({params}) => {
	return {
		title: `Leht kasutajale {params.id}`,
		description: `Kirjeldus kasutajale "{users[params.id]}"`,
	};
};

Tehke route, mis töötleb aadresse kujul /post/:id, kus :id asemel võib olla suvaline number.

Oletame, et on antud järgmine massiiv:

let posts = [
	{
		id: '1',
		title: 'postitus 1',
		desc: 'kirjeldus postitusele 1',
		text: 'tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1',
	},
	{
		id: '2',
		title: 'postitus 2',
		desc: 'kirjeldus postitusele 2',
		text: 'tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2',
	},
	{
		id: '3',
		title: 'postitus 3',
		desc: 'kirjeldus postitusele 3',
		text: 'tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3',
	},
];

export default function Post() {
	
}

Tehke nii, et antud id järgi kuvataks vajaliku postituse HTML, ning seataks õige pealkiri ja metakirjeldus.