Dynamiczne przekazywanie metadanych z treści w NextJS

W poprzedniej lekcji nauczyliśmy się ustawiać metadane w treści strony. Ta metoda jest dobra, ale nie zawsze ma zastosowanie. Chodzi o to, że metadane strony mogą zmieniać się w zależności od parametru dynamicznej trasy.

Spójrzmy na przykład. Załóżmy, że mamy plik z treścią do wyświetlenia użytkownika na podstawie jego id. Załóżmy, że w tym pliku znajduje się tablica z użytkownikami:

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

Wyświetlmy dane użytkownika odpowiadającego przekazanemu parametrowi:

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

Przejdźmy teraz do naszego problemu. Ponieważ wyświetlamy różnych użytkowników, to i metadane dla nich powinny być różne. Powinniśmy tworzyć je dynamicznie, w zależności od wartości parametru.

Robimy to za pomocą specjalnej funkcji generateMetadata, którą musimy wyeksportować z naszego komponentu:

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

W tej funkcji mamy dostępne parametry trasy:

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

Zwracajmy odpowiednie metadane w zależności od wartości parametru:

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

Utwórz trasę obsługującą adresy typu /post/:id, gdzie zamiast :id może być dowolna liczba.

Załóżmy, że dana jest następująca tablica:

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

Sprawdź, czy dla podanego id wyświetlany jest kod potrzebnego posta, a także ustawiany jest prawidłowy tytuł i metaopis.