Dynamische Übertragung von Metadaten aus dem Inhalt in NextJS

In der vorherigen Lektion haben wir gelernt, wie man Metadaten im Seiteninhalt festlegt. Diese Methode ist gut, aber nicht immer anwendbar. Das Problem ist, dass die Metadaten der Seite sich in Abhängigkeit von einem Parameter der dynamischen Route ändern können.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben eine Datei mit Inhalt um einen Benutzer anhand seiner id anzuzeigen. Nehmen wir an, diese Datei enthält ein Array mit Benutzern:

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

Lassen Sie uns die Daten des Benutzers anzeigen, der dem übergebenen Parameter entspricht:

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

Kommen wir nun zu unserem Problem. Da wir verschiedene Benutzer anzeigen, sollten auch die Metadaten für diese unterschiedlich sein. Wir müssen sie dynamisch generieren, in Abhängigkeit vom Wert des Parameters.

Dies geschieht mit Hilfe einer speziellen Funktion generateMetadata, die wir aus unserer Komponente exportieren müssen:

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

In dieser Funktion sind die Routenparameter für uns verfügbar:

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

Lassen Sie uns die entsprechenden Metadaten in Abhängigkeit vom Wert des Parameters zurückgeben:

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

Erstellen Sie eine Route, die Adressen der Form /post/:id verarbeitet, wobei :id durch eine beliebige Zahl ersetzt werden kann.

Gegeben sei das folgende Array:

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

Sorgen Sie dafür, dass für eine gegebene ID das Markup des entsprechenden Beitrags ausgegeben wird, und dass der korrekte Titel und die Meta-Beschreibung gesetzt werden.