Generate Images in Next.js

// app/api/og/route.ts
import { NextRequest, NextResponse } from "next/server";
import { renderToStaticMarkup } from "react-dom/server";
import OgCard from "@/components/OgCard";

export async function GET(req: NextRequest) {
  const { searchParams } = req.nextUrl;
  const title  = searchParams.get("title")  ?? "Untitled";
  const domain = searchParams.get("domain") ?? "";

  const html = renderToStaticMarkup(
    <OgCard title={title} domain={domain} />
  );

  const res = await fetch("https://renderpix.dev/v1/render", {
    method: "POST",
    headers: {
      "X-API-Key": process.env.RENDERPIX_API_KEY!,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ html, width: 1200, height: 630, format: "png" }),
    next: { revalidate: 3600 },
  });

  return new NextResponse(res.body, {
    headers: {
      "Content-Type":  "image/png",
      "Cache-Control": "public, max-age=3600",
    },
  });
}