Dynaaminen metatietojen välittäminen sisällöstä NextJS:ssä

Edellisessä oppitunnissa opimme asettamaan metatiedot sivuston sisällössä. Tämä menetelmä on hyvä, mutta ei aina sovellettavissa. Asia on, että sivun metatiedot voivat muuttua dynaamisen reitin parametrista riippuen.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on sisältötiedosto käyttäjän näyttämiseksi heidän id:nsä perusteella. Oletetaan, että tässä tiedostossa on taulukko käyttäjistä:

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

Näytetään käyttäjän tiedot, jotka vastaavat annettua parametria:

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

Siirrytään nyt ongelmaamme. Koska näytämme eri käyttäjiä, niin heidän metatietonsa pitäisi olla erilaiset. Meidän täytyy muodostaa ne dynaamisesti, parametrin arvosta riippuen.

Tämä tehdään erityisellä funktiolla generateMetadata, joka meidän on eksportattava komponentistamme:

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

Tässä funktiossa meille ovat saatavilla reitin parametrit:

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

Palautetaan tarvittavat metatiedot parametrin arvosta riippuen:

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

Tee reitti, joka käsittelee osoitteita muotoa /post/:id, jossa :id:n tilalla voi olla mikä tahansa numero.

Oletetaan seuraava taulukko:

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

Tee niin, että annetun id:n perusteella näytetään tarvittavan postauksen mukaus, sekä asetetaan oikea otsikko ja metakuvaus.