Truyền Metadata Động từ Nội dung trong NextJS

Trong bài học trước, chúng ta đã học cách đặt metadata trong nội dung trang web. Phương pháp này tốt, nhưng không phải lúc nào cũng áp dụng được. Vấn đề là metadata của trang có thể thay đổi tùy thuộc vào tham số của route động.

Hãy xem xét một ví dụ. Giả sử chúng ta có một tệp nội dung để hiển thị người dùng dựa trên id của họ. Giả sử trong tệp này có một mảng chứa người dùng:

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

Hãy hiển thị dữ liệu của người dùng tương ứng với tham số được truyền vào:

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

Bây giờ hãy chuyển sang vấn đề của chúng ta. Vì chúng ta hiển thị các người dùng khác nhau, nên metadata cho họ cũng phải khác nhau. Chúng ta cần tạo chúng một cách động, tùy thuộc vào giá trị của tham số.

Điều này được thực hiện bằng một hàm đặc biệt là generateMetadata, mà chúng ta phải export từ component của mình:

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

Trong hàm này, chúng ta có thể truy cập các tham số của route:

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

Hãy trả về metadata phù hợp dựa trên giá trị của tham số:

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

Tạo một route xử lý các địa chỉ dạng /post/:id, trong đó thay vì :id có thể là bất kỳ số nào.

Cho mảng sau:

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

Hãy thực hiện sao cho với id được chỉ định, giao diện của bài viết tương ứng được hiển thị, đồng thời tiêu đề và mô tả meta đúng được đặt.