Dinamiškas metaduomenų perdavimas iš turinio į NextJS

Ankstesnėje pamokoje išmokome nustatyti metaduomenis svetainės turinyje. Šis metodas yra geras, bet ne visada tinkamas. Esmė ta, kad puslapio metaduomenys gali keistis priklausomai nuo dinaminio maršruto parametro.

Pažiūrėkime pavyzdžiu. Tarkime, kad turime failą su turiniu vartotojui rodyti pagal jo id. Tarkime, kad šiame faile yra massvas su vartotojais:

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

Išveskime vartotojo duomenis, atitinkančius perduotą parametrą:

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

Dabar pereikime prie mūsų problemos. Kadangi rodome skirtingus vartotojus, tai ir jų metaduomenys turi būti skirtingi. Mes turime juos formuoti dinamiškai, priklausomai nuo parametro reikšmės.

Tai daroma naudojant specialią funkciją generateMetadata, kurią mes turime eksportuoti iš mūsų komponento:

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

Šioje funkcijoje mums prieinami maršruto parametrai:

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

Grąžinkime reikiamus metaduomenis priklausomai nuo parametro reikšmės:

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

Sukurkite maršrutą, apdorojantį adresus pavidalo /post/:id, kur vietoj :id gali būti bet koks skaičius.

Tarkime, kad duotas toks masyvas:

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

Padarykite taip, kad pagal nurodytą id būtų išvesta reikiamo įrašo išdėstymas, o taip pat nustatytas teisingas pavadinimas ir metaaprašas.