NextJS'te İçerikten Dinamik Meta Veri Aktarımı

Önceki derste, site içeriğinde meta verileri nasıl belirleyeceğimizi öğrendik. Bu yöntem iyidir, ancak her zaman uygulanamaz. Sorun şu ki, sayfanın meta verileri dinamik route parametresine bağlı olarak değişebilir.

Bir örnek üzerinden inceleyelim. Diyelim ki, kullanıcıyı id'ye göre göstermek için içerik dosyamız var. Bu dosyada kullanıcılardan oluşan bir dizi olduğunu varsayalım:

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

Şimdi, iletilen parametreye karşılık gelen kullanıcının verilerini gösterelim:

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

Şimdi problemimize geri dönelim. Farklı kullanıcıları gösterdiğimiz için, onlar için meta veriler de farklı olmalı. Bunları parametrenin değerine bağlı olarak dinamik bir şekilde oluşturmalıyız.

Bu, bileşenimizden dışa aktarmamız gereken özel bir generateMetadata fonksiyonu kullanılarak yapılır:

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

Bu fonksiyonda route parametreleri bize açıktır:

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

Parametre değerine bağlı olarak doğru meta verileri döndürelim:

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

/post/:id şeklindeki adresleri işleyen bir route yapın, burada :id yerine herhangi bir sayı gelebilir.

Aşağıdaki dizi verilmiştir:

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

Belirtilen id'ye göre ilgili gönderinin HTML çıktısının gösterilmesini, ayrıca doğru başlık ve meta açıklamanın ayarlanmasını sağlayın.