Open Graph Image API for Next.js

Why Next.js Developers Love Our OG Image API

Next.js is built for performance and SEO. Your OG images should be too. Our API integrates seamlessly with Next.js features like:

getStaticProps — Generate images at build time
getServerSideProps — Generate on-demand for dynamic content
App Router — Full support for Next.js 13+ with generateMetadata
API Routes — Proxy requests through your own domain
Image Optimization — Works with next/image

Quick Start (5 Minutes)

Get Your API Key

Add to Environment Variables

# .env.local
OG_IMAGE_API_KEY=og_your_api_key_here

Create a Utility Function

// lib/og-image.ts
export async function generateOGImage(params: {
  title: string;
  subtitle?: string;
  theme?: 'dark' | 'light';
}) {
  const response = await fetch('https://ogimageapi.io/api/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': process.env.OG_IMAGE_API_KEY!
    },
    body: JSON.stringify(params)
  });
  
  return response;
}

App Router (Next.js 13+)

Use the generateMetadata function to set dynamic OG images:

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  
  // Generate OG image URL with parameters
  const ogImageUrl = new URL('https://ogimageapi.io/api/generate');
  ogImageUrl.searchParams.set('title', post.title);
  ogImageUrl.searchParams.set('subtitle', post.excerpt);
  ogImageUrl.searchParams.set('theme', 'dark');
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: ogImageUrl.toString() }]
    },
    twitter: {
      card: 'summary_large_image',
      images: [ogImageUrl.toString()]
    }
  };
}

Pages Router (Next.js 12 and earlier)

Use getStaticProps for static generation:

// pages/blog/[slug].tsx
import Head from 'next/head';

export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  
  // Build OG image URL
  const ogImage = `https://ogimageapi.io/api/generate?` + 
    new URLSearchParams({
      title: post.title,
      subtitle: post.author,
      theme: 'dark'
    }).toString();
  
  return { props: { post, ogImage } };
}

export default function BlogPost({ post, ogImage }) {
  return (
    <>
      <Head>
        <meta property="og:image" content={ogImage} />
        <meta name="twitter:image" content={ogImage} />
      </Head>
      {/* Page content */}
    </>
  );
}

Advanced: Caching Images

For high-traffic sites, cache generated images on your own CDN:

// app/api/og/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  
  const response = await fetch('https://ogimageapi.io/api/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': process.env.OG_IMAGE_API_KEY!
    },
    body: JSON.stringify({
      title: searchParams.get('title'),
      subtitle: searchParams.get('subtitle'),
      theme: searchParams.get('theme') || 'dark'
    })
  });
  
  const image = await response.arrayBuffer();
  
  return new NextResponse(image, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=31536000, immutable'
    }
  });
}

Build Better Social Previews in Next.js

Get started with 25 free images per month. No credit card required.

Get Your API Key →