What is Next.js OpenGraph image generation?

Next.js can generate OpenGraph (OG) images dynamically server-side using the ImageResponse API from next/og. These images appear when links are shared on social media. Static OG image: place opengraph-image.png in the route folder — used automatically for all pages in that segment. Dynamic OG images: create opengraph-image.tsx (or .js) in the route folder: import { ImageResponse } from "next/og"; export const runtime = "edge"; // Edge for faster generation export const size = { width: 1200, height: 630 }; export const contentType = "image/png"; export default async function OGImage({ params }: { params: { id: string } }) { const post = await getPost(params.id); return new ImageResponse( <div style={{ display: "flex", flexDirection: "column", backgroundColor: "#1a1a2e", width: "100%", height: "100%", padding: 48 }}> <h1 style={{ color: "white", fontSize: 64 }}>{post.title}</h1> <p style={{ color: "#aaa" }}>{post.excerpt}</p> </div>, { ...size } ); }. ImageResponse: renders JSX to a PNG image using Satori (HTML/CSS to SVG to PNG). Supports subset of CSS (flexbox, basic styling). Can load fonts and images. Edge runtime: OG images are generated at the edge for minimal latency. Caching: OG images are cached by default. Twitter card images: similarly create twitter-image.tsx. Custom fonts: load custom fonts in the ImageResponse options: { fonts: [{ name: "Inter", data: fontData }] }.