Dynamic OG Image Generator

// app/api/og/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  const title = req.nextUrl.searchParams.get("title") ?? "My Site";
  const desc  = req.nextUrl.searchParams.get("desc")  ?? "";

  const html = `
    <div style="width:1200px;height:630px;
               background:linear-gradient(135deg,#0d1120,#080b12);
               display:flex;flex-direction:column;justify-content:center;
               padding:80px;font-family:sans-serif;color:white">
      <div style="font-size:14px;color:#22d3ee;margin-bottom:16px">
        MYSITE.COM
      </div>
      <h1 style="font-size:56px;font-weight:800;line-height:1.1;
                 letter-spacing:-2px;margin-bottom:24px">
        ${title}
      </h1>
      <p style="font-size:22px;color:#64748b;max-width:700px">${desc}</p>
    </div>
  `;

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

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