How do you generate dynamic Open Graph images in Next.js?

Question

Accepted Answer

Next.js can **generate social-share (Open Graph) images on the fly** using the `ImageResponse` API — rendering JSX/CSS to a PNG at the edge. This gives every page a custom share preview without designing images by hand. ## A file-based OG image route ```tsx // app/blog/[slug]/opengraph-image.tsx import { ImageResponse } from "next/og"; export const size = { width: 1200, height: 630 }; // standard OG dimensions export const contentType = "image/png"; export default async function OGImage({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // fetch real data for this page return new ImageResponse( ( // JSX styled with a subset of CSS (flexbox), rendered to an image

{post.title}

{post.author}

), size ); } ``` The special filename `opengraph-image.tsx` is automatically wired into the page's metadata, so the `` points at this generated PNG. Each blog post gets a unique image showing its real title and author. ## How it works under the hood ```text ImageResponse uses Satori → converts JSX + (flexbox) CSS → SVG → PNG. Runs on the Edge runtime → fast generation, cacheable. Supports custom fonts, images, and gradients (a CSS subset, not full CSS). ``` ## Programmatic generation (any route) ```tsx // app/api/og/route.tsx — generate from query params import { ImageResponse } from "next/og"; export function GET(req: Request) { const title = new URL(req.url).searchParams.get("title") ?? "Default"; return new ImageResponse(

{title}

, { width: 1200, height: 630 }); } ``` ## Why dynamic OG images matter A compelling, content-specific share image dramatically increases click-through when links are posted on X, LinkedIn, Slack, Discord, etc. Manually creating one per article/product is impractical; generating them from data is automatic and always up to date. ## Why it matters `ImageResponse` (the `next/og` API) turns JSX+CSS into share images at request time, so every dynamic page can have a tailored OG preview without a design pipeline. Combined with the `opengraph-image.tsx` convention, it makes rich, data-driven social previews — a real driver of link click-through — a built-in, low-effort feature rather than a manual chore.