OG Images That Build Themselves

import type { Metadata } from "next";

async function mintOgUrl(variables: Record<string, string>) {
  const res = await fetch("https://api.htmlpix.com/v1/url", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.HTMLPIX_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      templateId: process.env.BLOG_OG_TEMPLATE_ID,
      variables,
      width: 1200,
      height: 630,
    }),
  });
  const { url } = await res.json();
  return url;
}

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  const ogUrl = await mintOgUrl({
    title: post.title,
    author: post.author,
    date: post.date,
    category: post.category,
  });

  return {
    openGraph: { images: [{ url: ogUrl, width: 1200, height: 630 }] },
    twitter: { card: "summary_large_image", images: [ogUrl] },
  };
}