Next.js Dynamic Metadata

import type { Metadata } from class=class="text-emerald-400">"text-emerald-400">'next'

interface PageProps {
  params: Promise<{ slug: string }>
}

async function getPost(slug: string) {
  const res = await fetch(class="text-emerald-400">`https:class=class="text-emerald-400">"text-gray">//api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 },
  })
  if (!res.ok) return null
  return res.json()
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)

  if (!post) return { title: class=class="text-emerald-400">"text-emerald-400">'Not Found' }

  return {
    title: class="text-emerald-400">`${post.title} | My Blog`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  }
}

export default async function PostPage({ params }: PageProps) {
  const { slug } = await params
  const post = await getPost(slug)
  if (!post) return <div>Not found</div>
  return <article><h1>{post.title}</h1><p>{post.content}</p></article>
}