Dinamikus metaadatok átadása a tartalomból a NextJS-ben

Az előző leckében megtanultuk, hogyan állíthatunk be metaadatokat a weboldal tartalmában. Ez a módszer jó, de nem mindig alkalmazható. Az a helyzet, hogy az oldal metaadatai változhatnak a dinamikus útvonal paramétereitől függően.

Nézzük meg egy példán. Tegyük fel, hogy van egy tartalomfájlunk egy felhasználó id alapján történő megjelenítéséhez. Tegyük fel, hogy ebben a fájlban van egy tömb a felhasználókkal:

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

Jelenítsük meg annak a felhasználónak az adatait, aki a megadott paraméternek felel meg:

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

Térjünk most át a problémánkra. Mivel különböző felhasználókat jelenítünk meg, ezért a metaadataiknak is különbözőknek kell lenniük. Dinamikusan kell őket létrehoznunk, a paraméter értékétől függően.

Ezt egy speciális generateMetadata függvénnyel tehetjük meg, amelyet exportálnunk kell a komponensünkből:

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

Ebben a függvényben hozzáférünk az útvonal paramétereihez:

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

Adjunk vissza a megfelelő metaadatokat a paraméter értékétől függően:

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

Készítsen egy útvonalat, amely kezeli az /post/:id formájú címeket, ahol a :id helyett bármilyen szám állhat.

Tegyük fel, hogy a következő tömb adott:

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

Úgy kell beállítani, hogy a megadott azonosító alapján a megfelelő bejegyzés HTML kimenete jelenjen meg, valamint a helyes oldalcím és meta leírás legyen beállítva.