Generate OG Images in Next.js Without a Headless Browser

• Edge Runtime Required: You must use Vercel's edge runtime, which has its own quirks and limitations
• JSX-to-Image Rendering: Converting JSX to an image is complex and error-prone
• Limited CSS Support: Many CSS features don't work as expected
• Cold Starts: Cold function starts add 500ms-1s to your render time
• Provider Lock-in: Tightly coupled to Vercel's infrastructure

• 150MB+ Dependencies: Chromium bloats your bundle size significantly
• Slow Performance: 2-3 seconds per image is common, even on fast machines
• Full Browser Required: You need a complete browser environment
• Resource Heavy: Each request spawns a new browser instance
• Difficult to Cache: Hard to implement effective caching strategies

• External HTTP Call: Simple fetch request, no complex setup
• Cached Results: Your images are cached at the edge for instant delivery
• Sub-200ms Latency: Fast response times, no cold starts
• Works Anywhere: Works on Vercel, Netlify, self-hosted, or local development
• Beautiful Templates: Modern, professional templates out of the box
• No Heavy Dependencies: Just a simple API call, zero extra code

First, visit imagoapi.com and sign up for a free account. You'll get your API key immediately — no credit card required.

Create a new file at app/api/og/route.ts (for App Router) or pages/api/og.ts (for Pages Router):

import { NextRequest, NextResponse } from 'next/server';

// App Router
export async function GET(req: NextRequest) {
  const title = req.nextUrl.searchParams.get('title') ?? 'My Page';
  const description = req.nextUrl.searchParams.get('description') ?? '';
  
  const url = new URL('https://imagoapi.com/api/og/generate');
  url.searchParams.set('title', title);
  url.searchParams.set('description', description);
  url.searchParams.set('template', 'modern');
  url.searchParams.set('api_key', process.env.IMAGO_API_KEY!);
  
  const res = await fetch(url.toString());
  const arrayBuffer = await res.arrayBuffer();
  
  return new NextResponse(arrayBuffer, {
    headers: {
      // 'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=86400',
    },
  });
}

This route handler constructs a request to Imago API, passes your parameters, and returns the generated image directly to the client with proper caching headers.

Now, update your page's metadata to use the OG image endpoint:

import { NextResponse } from 'next/server';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [{
        url: `/api/og?title=${encodeURIComponent(post.title)}&description=${encodeURIComponent(post.excerpt)}`,
        width: 1200,
        height: 630,
      }],
    },
  };
}

Now whenever someone shares your page on social media, the generated OG image will appear automatically.

For Pages Router users, the implementation is nearly identical. Create pages/api/og.ts with the same logic:

import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { title, description } = req.query;
  
  const url = new URL('https://imagoapi.com/api/og/generate');
  url.searchParams.set('title', String(title ?? 'My Page'));
  url.searchParams.set('description', String(description ?? ''));
  url.searchParams.set('template', 'modern');
  url.searchParams.set('api_key', process.env.IMAGO_API_KEY!);
  
  const imagoRes = await fetch(url.toString());
  const buffer = await imagoRes.arrayBuffer();
  
  res.setHeader('Content-Type', 'image/png');
  res.setHeader('Cache-Control', 'public, max-age=86400');
  res.status(200).send(Buffer.from(buffer));
}

Finally, add your API key to your environment:

IMAGO_API_KEY=your_api_key_here

Don't forget to add this to your production environment (Vercel, Netlify, etc.) as well.

Using the direct URL pattern exposes your API key in the URL. For production apps, I recommend using the proxy approach (Steps 2-5) to keep your API key secure.