contentlayer requires that page to be a client and I want to have dynamic metadata, here is the metadata I want:

export async function generateMetadata({ params }: any): Promise<Metadata> {
  const post = allPosts.find((post) => post.slug == params?.slug)
  return {
    title: post?.title,
    openGraph: {
      title: post?.title,
      description: post?.description,
      url: 'https://yusuf.fyi/posts/' + post?.slug,
      locale: 'en-US',
      authors: ['Yusuf Bouzekri'],
      images: [
        {
          url: 'https://yusuf.fyi/api/og?title=' + post?.title,
          alt: "The article's cover photo",
          height: 1200,
          width: 630,
        }
      ]
    },

    twitter: {
      card: 'summary_large_image',
      title: post?.title,
      description: post?.description,
      creator: "@spacebuffer",
      site: '@spacebuffer',
      images: [
        {
          url: 'https://yusuf.fyi/api/og?title=' + post?.title,
          alt: "The article's cover photo",
          height: 1200,
          width: 630,
        }
      ]
    }
  }

}