您如何在 Next.js 中生成动态 Open Graph 图像？

Question

Accepted Answer

Next.js 可以**使用 `ImageResponse` API 动态生成社交分享 (Open Graph) 图像**——在边缘节点将 JSX/CSS 渲染为 PNG。这样每个页面都能获得自定义的分享预览，无需手动设计图像。 ## 基于文件的 OG 图像路由 ```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 ); } ``` 特殊文件名 `opengraph-image.tsx` 会自动关联到页面的元数据，因此 `` 会指向此生成的 PNG。每篇博客文章都会获得一个显示其实际标题和作者的唯一图像。 ## 工作原理 ```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). ``` ## 程序化生成（任意路由） ```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 }); } ``` ## 为什么动态 OG 图像很重要当链接在 X、LinkedIn、Slack、Discord 等平台上分享时，引人注目的、内容特定的分享图像会显著增加点击率。为每篇文章/产品手动创建一个不切实际；从数据生成它们是自动的并且始终保持最新。 ## 为什么这很重要 `ImageResponse`（`next/og` API）在请求时将 JSX+CSS 转换为分享图像，因此每个动态页面都可以有定制的 OG 预览，无需设计流程。结合 `opengraph-image.tsx` 约定，它使富有、数据驱动的社交预览——这是链接点击率的真正推动力——成为一项内置的、低成本的功能，而不是手工操作。