commerce/app/[page]/opengraph-image.tsx

import { getPage } from "lib/store/pages";
import { ImageResponse } from "next/og";

export const runtime = "edge";
export const contentType = "image/png";
export const size = {
  width: 1200,
  height: 630,
};

export default async function Image({ params }: { params: { page: string } }) {
  const page = await getPage(params.page);
  const title = page?.seo?.title || page?.title || "Page Not Found";

  return new ImageResponse(
    (
      <div
        style={{
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: 48,
        }}
      >
        <div
          style={{
            fontSize: 48,
            fontWeight: 600,
            textAlign: "center",
            color: "black",
          }}
        >
          {title}
        </div>
      </div>
    ),
    {
      ...size,
    }
  );
}