Penghantaran Metadata Dinamik daripada Kandungan dalam NextJS

Dalam pelajaran sebelumnya, kita belajar menetapkan metadata dalam kandungan tapak. Kaedah ini bagus, tetapi tidak selalu boleh digunakan. Masalahnya ialah metadata halaman boleh berubah bergantung pada parameter laluan dinamik.

Mari kita lihat contoh. Katakan kita mempunyai fail dengan kandungan untuk menunjukkan pengguna berdasarkan id-nya. Katakan dalam fail ini terdapat tatasusunan dengan pengguna:

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

Mari kita paparkan data pengguna, yang sepadan dengan parameter yang diberikan:

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

Sekarang mari kita beralih kepada masalah kita. Oleh kerana kita menunjukkan pengguna yang berbeza, maka metadata untuk mereka juga harus berbeza. Kita perlu membentuknya secara dinamik, bergantung pada nilai parameter.

Ini dilakukan menggunakan fungsi khas generateMetadata, yang mesti kita eksport daripada komponen kita:

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

Dalam fungsi ini, parameter laluan tersedia untuk kita:

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

Mari kita kembalikan metadata yang diperlukan bergantung pada nilai parameter:

export const generateMetadata = ({params}) => {
	return {
		title: `Halaman untuk pengguna {params.id}`,
		description: `Huraian untuk pengguna "{users[params.id]}"`,
	};
};

Buat laluan yang memproses alamat jenis /post/:id, di mana menggantikan :id boleh menjadi sebarang nombor.

Katakan tatasusunan berikut diberikan:

let posts = [
	{
		id: '1',
		title: 'post 1',
		desc: 'huraian untuk post 1',
		text: 'teks1 teks1 teks1 teks1 teks1 teks1 teks1 teks1',
	},
	{
		id: '2',
		title: 'post 2',
		desc: 'huraian untuk post 2',
		text: 'teks2 teks2 teks2 teks2 teks2 teks2 teks2 teks2',
	},
	{
		id: '3',
		title: 'post 3',
		desc: 'huraian untuk post 3',
		text: 'teks3 teks3 teks3 teks3 teks3 teks3 teks3 teks3',
	},
];

export default function Post() {
	
}

Lakukan supaya untuk ID yang diberikan, markah yang betul untuk siaran dipaparkan, dan juga tetapkan tajuk dan huraian meta yang betul.