การส่งข้อมูลเมต้าแบบไดนามิกจากเนื้อหาใน NextJS

ในบทเรียนที่ผ่านมา เราได้เรียนรู้วิธีการกำหนด ข้อมูลเมตาในเนื้อหาของเว็บไซต์ วิธีนี้ดี แต่ไม่สามารถใช้ได้เสมอไป เพราะข้อมูลเมตาของหน้าอาจเปลี่ยนแปลงได้ ขึ้นอยู่กับพารามิเตอร์ของเส้นทางไดนามิก

ลองมาดูตัวอย่างกัน สมมติว่าเรามีไฟล์เนื้อหา สำหรับแสดงผู้ใช้ตาม id ของเขา สมมติว่าในไฟล์นี้มี อาร์เรย์ของผู้ใช้:

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

ลองแสดงข้อมูลของผู้ใช้ ที่ตรงกับพารามิเตอร์ที่ส่งมา:

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

ตอนนี้เรามาดูปัญหาของเรา เนื่องจากเราแสดงผู้ใช้ที่แตกต่างกัน ดังนั้นข้อมูลเมต้าสำหรับพวกเขาก็ควรจะแตกต่างกันไปด้วย เราควรกำหนดข้อมูลเหล่านั้นแบบไดนามิก ขึ้นอยู่กับค่าของพารามิเตอร์

ทำได้โดยใช้ฟังก์ชันพิเศษ generateMetadata ซึ่งเราต้องส่งออกมาจากคอมโพเนนต์ของเรา:

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

ในฟังก์ชันนี้ พารามิเตอร์ของเส้นทาง สามารถใช้งานได้:

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

ลองส่งข้อมูลเมต้าที่ต้องการ ตามค่าของพารามิเตอร์:

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

สร้างเส้นทางที่จัดการที่อยู่ รูปแบบ /post/:id โดยแทนที่ :id ด้วยตัวเลขใดๆ ก็ได้

สมมติว่ามีอาร์เรย์ต่อไปนี้:

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

ทำให้เมื่อระบุไอดีที่ต้องการ จะแสดงโครงสร้าง HTML ของโพสต์นั้น และกำหนดหัวเรื่อง และคำอธิบายเมต้าที่ถูกต้อง