A Vercel OG alternative for Next.js

With ogmake your OG image is one signed URL in generateMetadata. The card renders on ogmake's side in a real browser engine and is cached after the first request, so there is no ImageResponse route, no font files and no edge function in your app.

What ogmake gives you

Full CSS layouts. CSS grid, flexbox and stacking with z-index all work in a template.
Any script. Chinese, Japanese, Korean, Arabic and Hebrew text use bundled Noto fonts, and emoji render in color. There are no font bytes to load.
Nothing to run in your app. The image is served from a URL, so there is no runtime to size or maintain.
Any stack. The same URL works from Next.js, Laravel, Django, Rails and static sites.
An editor for the design. Build and preview a card in the editor before you wire it to your pages.
Check the result. The OG image checker shows what a crawler sees once your tags are live.

Migrate from @vercel/og

Replace the image route with a helper that builds a signed URL, then point openGraph.images at it.

Before — an ImageResponse route:

// app/og/route.tsx
import { ImageResponse } from "next/og";

export async function GET(req: Request) {
  const title = new URL(req.url).searchParams.get("title") ?? "";
  return new ImageResponse(<div style={{ display: "flex" }}>{title}</div>, {
    width: 1200,
    height: 630,
  });
}

After — a signed ogmake URL, no route:

// app/blog/[slug]/page.tsx
import { ogImageUrl } from "@/lib/ogmake";

export async function generateMetadata({ params }) {
  const post = await getPost((await params).slug);
  const image = ogImageUrl({ title: post.title, site: "My Blog" });
  return {
    openGraph: { images: [{ url: image, width: 1200, height: 630 }] },
    twitter: { card: "summary_large_image", images: [image] },
  };
}

The ogImageUrl() helper is a few lines of node:crypto: copy it from the Next.js guide, step 2. Delete the old route and its font files once the new URLs are in place.

Questions

How do I replace @vercel/og in a Next.js app?

Add a small server-side helper that signs an ogmake URL, call it from generateMetadata, and use the result as the og:image. The old ImageResponse route and its font files can then be deleted. The Next.js guide has the full helper.

Does ogmake support CSS grid and z-index?

Yes. Cards render in a real browser engine, so CSS grid, flexbox and z-index stacking all work in a template.

Do I need to bundle fonts for Chinese, Japanese, Korean, Arabic or emoji?

No. Chinese, Japanese, Korean, Arabic and Hebrew text use bundled Noto fonts, and emoji render in color.

Does it only work with Next.js?

No. The image is a signed URL, so the same approach works from Laravel, Django, Rails, Hugo, Jekyll, Ghost, WordPress and plain HTML.

Can I design the card visually?

Yes. The editor lets you pick a template, fill in its fields and preview the card before you use it on your pages.

Try it on your site

Follow the Next.js guide to add your first image, open the editor to design it, or see pricing.

Sign up