NextJS да контентдан маълумотларни динамик тарзда ўтказиш

Олдинги дарсликда биз сайт контентида метамаълумотларни қандай белгилашни ўрганган эдик. Бу усул яхши, лекин ҳамма вақт қўлланилавермайди. Гапи шундаки, саҳифа метамаълумотлари динамик йўл параметрига боғлиқ равишда ўзгариши мумкин.

Келинг, мисолда кўрамиз. Фарз қилайлик, бизда унинг idи бойича фойдаланувчини кўрсатиш учун контент файли мавжуд. Фарз қилайлик, ушбу файлда фойдаланувчилар массиви бор:

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

Келинг, берилган параметрга мос келувчи фойдаланувчи маълумотларини чиқарайlik:

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

Берилган ID бојича мос келувчи постнинг версткаси, шунингдек тўғри сарлавҳа ва мета-изоҳ ўрнатилишини таъминланг.