დინამიური მეტამონაცემების გადაცემა კონტენტიდან NextJS-ში

წინა გაკვეთილზე ჩვენ ვისწავლით, როგორ დაგვეთანხმებინა მეტამონაცემები საიტის კონტენტში. ეს მეთოდი კარგია, მაგრამ ყოველთვის არ არის გამოყენებადი. საქმე ისაა, რომ გვერდის მეტამონაცემები შეიძლება შეიცვალოს დინამიური მარშრუტის პარამეტრიდან გამომდინარე.

მაგალითით ვნახოთ. დავუშვათ, გვაქვს ფაილი კონტენტით მომხმარებლის მისი id-ით საჩვენებლად. დავუშვათ, ამ ფაილში არის მომხმარებლების მასივი:

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

გამოვიტანოთ მომხმარებლის მონაცემები, რომელიც შეესაბამება გადაცემულ პარამეტრს:

export default function User({ params }) {
	return <>
		<h1>მომხმარებელი {params.id}</h1>
		<p>
			სახელი: {users[params.id]}
		</p>
	</>;
}

ახლა კი გადავიდეთ ჩვენს პრობლემაზე. რადგან ჩვენ სხვადასხვა მომხმარებელს ვაჩვენებთ, მათთვის მეტამონაცემებიც სხვადასხვა უნდა იყოს. ჩვენ მათ დინამიურად უნდა ჩამოვაყალიბოთ, პარამეტრის მნიშვნელობიდან გამომდინარე.

ეს კეთდება სპეციალური ფუნქციის generateMetadata-ის მეშვეობით, რომელიც ჩვენ უნდა ექსპორტირებული გვქონდეს ჩვენი კომპონენტიდან:

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

ამ ფუნქციაში ჩვენთვის ხელმისაწვდომია მარშრუტის პარამეტრები:

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

მოდით, მივაწოდოთ საჭირო მეტამონაცემები პარამეტრის მნიშვნელობიდან გამომდინარე:

export const generateMetadata = ({params}) => {
	return {
		title: `გვერდი მომხმარებლისთვის {params.id}`,
		description: `აღწერა მომხმარებლისთვის "{users[params.id]}"`,
	};
};

შექმენით მარშრუტი, რომელიც ამუშავებს მისამართებს ვიუ /post/:id, სადაც :id-ის ნაცვლად შეიძლება იყოს ნებისმიერი რიცხვი.

დავუშვათ, მოცემულია შემდეგი მასივი:

let posts = [
	{
		id: '1',
		title: 'პოსტი 1',
		desc: 'აღწერა პოსტი 1-ისთვის',
		text: 'ტექსტი1 ტექსტი1 ტექსტი1 ტექსტი1 ტექსტი1 ტექსტი1 ტექსტი1',
	},
	{
		id: '2',
		title: 'პოსტი 2',
		desc: 'აღწერა პოსტი 2-ისთვის',
		text: 'ტექსტი2 ტექსტი2 ტექსტი2 ტექსტი2 ტექსტი2 ტექსტი2 ტექსტი2',
	},
	{
		id: '3',
		title: 'პოსტი 3',
		desc: 'აღწერა პოსტი 3-ისთვის',
		text: 'ტექსტი3 ტექსტი3 ტექსტი3 ტექსტი3 ტექსტი3 ტექსტი3 ტექსტი3',
	},
];

export default function Post() {
	
}

გახადეთ ისე, რომ მოცემული id-ით გამოიტანოს საჭირო პოსტის ვერსტკა, ასევე დაყენდეს სწორი სათაური და მეტააღწერა.