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 бойынша посттың дұрыс версткасы шығарылуы үшін, сондай-ақ дұрыс атау мен метасипаттама орнатылуы үшін жасаңыз.