·6 min read

How to Add Dynamic OG Images to Next.js in 2 Minutes

Step-by-step guide to generating dynamic Open Graph images in Next.js using the App Router and Pages Router. No build complexity, no Puppeteer — just a URL.

Next.js OG image generation

The Problem with OG Images in Next.js

Every Next.js developer knows the pain: you build a beautiful blog or SaaS, share a link on Twitter, and… it looks terrible. No preview image, or worse — a generic placeholder. The problem is that generating dynamic Open Graph images for every page has traditionally been complex.

The common approaches — Puppeteer screenshots, @vercel/og with custom JSX, or manual Canva designs — all have drawbacks: slow builds, complex setup, or they just don't scale.

The API Approach: Zero Dependencies

Instead of generating images in your build pipeline, use an OG image API that returns images from URL parameters. Your Next.js app just constructs a URL — no packages to install, no build step changes, no server-side rendering of images.

Here's the core idea: your og:image meta tag points to an API URL that generates the image on-the-fly. The API handles rendering, caching, and serving the PNG.

Next.js App Router (Recommended)

With the App Router, you export metadata from your page or layout:

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

// Helper to build OG image URLs
function ogUrl(params: Record<string, string>) {
  const qs = new URLSearchParams(params).toString();
  return `https://ogmagic.dev/api/og?${qs}`;
}

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  
  const image = ogUrl({
    template: "minimal-dark",
    title: post.title,
    description: post.excerpt,
    domain: "myblog.dev",
  });

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      images: [{ url: image, width: 1200, height: 630 }],
    },
    twitter: {
      card: "summary_large_image",
      images: [image],
    },
  };
}

That's it. Every blog post now has a unique, beautiful OG image. No build step changes. No image files to manage.

Next.js Pages Router

With the Pages Router, use the Head component:

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

export default function BlogPost({ post }) {
  const ogImage = `https://ogmagic.dev/api/og?${new URLSearchParams({
    template: "gradient-mesh",
    title: post.title,
    description: post.excerpt,
    domain: "myblog.dev",
  }).toString()}`;

  return (
    <>
      <Head>
        <meta property="og:image" content={ogImage} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:image" content={ogImage} />
      </Head>
      <article>{/* Your blog post */}</article>
    </>
  );
}

Layout-Level OG Images

You can also set a default OG image in your root layout that applies to all pages without their own:

// app/layout.tsx
export const metadata: Metadata = {
  openGraph: {
    images: [{
      url: "https://ogmagic.dev/api/og?template=gradient-mesh&title=My+Site&domain=mysite.dev",
      width: 1200,
      height: 630,
    }],
  },
};

Choosing Templates

OGMagic ships with 55+ templates optimized for different use cases: blog posts, SaaS products, documentation, and more. The free tier includes 5 templates — enough for most personal projects. Pro ($12 one-time) unlocks everything.

Popular templates for Next.js blogs: minimal-dark, gradient-mesh, clean-white, vercel-style, and notion-style.

Browse all templates in the editor →

OGMagic vs @vercel/og

Vercel's built-in @vercel/og package is great, but it requires you to write JSX for your image layout, handle font loading, and debug rendering issues. OGMagic gives you:

Testing Your OG Images

After adding OG images, test them with:

Pro tip: Social platforms cache OG images aggressively. If you update an image, use the platform's debug tool to force a re-fetch.

Conclusion

Adding dynamic OG images to Next.js doesn't have to be complex. With an API-based approach, you get beautiful social previews for every page with just a URL — no build changes, no dependencies, no maintenance.

Read the full API docs → or try the visual editor →

Add OG images to your Next.js app in 2 minutes

No signup needed. Free tier includes 50 images/month.

Try the EditorRead the Docs
📬

Get OG tips & product updates

Join our newsletter for Open Graph best practices, new template releases, and exclusive discounts. No spam, unsubscribe anytime.

🔒 We respect your inbox. No spam, ever.