Dynamic Generate Metadata in Next.js 14

Next.js 14 introduces a generateMetadata function that allows you to dynamically create metadata for each route. you need to add this to you page.tsx file.

export async function generateMetadata({ params }) {
const { slug } = params;
const data = await fetchData(slug); //API call to get the data

const title = data.title;
const description = `Discover insightful information about ${title}. Dive into details and explore more.`;
const ogTitle = data.ogTitle || title;
const ogDescription = data.ogDescription || description;
const twitterTitle = data.twitterTitle || title;
const twitterDescription = data.twitterDescription || description;

return {
 title,
 description,
 openGraph: {
   title: ogTitle,
   description: ogDescription,
   url: `https://yourwebsite.com/${slug}`,
   type: 'article',
 },
 twitter: {
   card: 'summary_large_image',
   title: twitterTitle,
   description: twitterDescription,
 },
};
}

generateMetadata Function: This function fetches page data based on the slug parameter and returns a metadata object with properties like title, description, openGraph, and twitter.