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

Берилген ID боюнча туура постунун версткасы чыгарылышы, ошондой эле титул жана мета-сүрөттөмө туура коюлушу үчүн керектүү иштерди жасаңыз.