Meneruskan Metadata Secara Dinamis dari Konten di NextJS

Dalam pelajaran sebelumnya, kita belajar cara mengatur metadata dalam konten situs. Cara ini bagus, tetapi tidak selalu dapat diterapkan. Masalahnya adalah metadata halaman dapat berubah tergantung pada parameter rute dinamis.

Mari kita lihat sebuah contoh. Misalkan kita memiliki file dengan konten untuk menampilkan pengguna berdasarkan id-nya. Misalkan dalam file ini terdapat array berisi pengguna:

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

Mari kita tampilkan data pengguna yang sesuai dengan parameter yang diberikan:

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

Sekarang mari kita beralih ke masalah kita. Karena kita menampilkan pengguna yang berbeda, maka metadata untuk mereka juga harus berbeda. Kita harus membentuknya secara dinamis, tergantung pada nilai parameter.

Ini dilakukan dengan menggunakan fungsi khusus generateMetadata, yang harus kita ekspor dari komponen kita:

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

Dalam fungsi ini, parameter rute tersedia untuk kita:

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

Mari kita berikan metadata yang sesuai tergantung pada nilai parameter:

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

Buatlah rute yang menangani alamat berbentuk /post/:id, dimana pengganti :id dapat berupa angka apa pun.

Misalkan diberikan array berikut:

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

Buatlah agar berdasarkan id yang diberikan ditampilkan markup dari post yang sesuai, serta judul dan deskripsi meta yang benar diatur.