Δυναμική Μετάδοση Μεταδεδομένων από το Περιεχόμενο στο NextJS

Στο προηγούμενο μάθημα μάθαμε να ορίζουμε μεταδεδομένα στο περιεχόμενο του site. Αυτή η μέθοδος είναι καλή, αλλά δεν εφαρμόζεται πάντα. Το θέμα είναι ότι τα μεταδεδομένα της σελίδας μπορεί να αλλάζουν ανάλογα με την παράμετρο ενός δυναμικού route.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε ένα αρχείο με περιεχόμενο για την εμφάνιση ενός χρήστη βάσει του 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, την οποία πρέπει να εξάγουμε από το component μας:

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

Σε αυτή τη συνάρτηση μας είναι διαθέσιμες οι παράμετροι του route:

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]}"`,
	};
};

Δημιουργήστε ένα route, που να χειρίζεται διευθύνσεις της μορφής /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 να εμφανίζεται το markup της σχετικής ανάρτησης, καθώς και να ορίζεται ο σωστός τίτλος και μετα-περιγραφή.