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などに投稿されたときのクリックスルーを劇的に増加させます。記事/製品ごとに手動で1つ作成することは実用的ではなく、データから生成することは自動的で常に最新です。 ## なぜ重要なのか `ImageResponse`（`next/og` API）はJSX+CSSをリクエスト時にシェア画像に変換するため、すべての動的ページは設計パイプラインなしでカスタマイズされたOGプレビューを持つことができます。 `opengraph-image.tsx`規約と組み合わせると、リッチでデータ駆動型のソーシャルプレビュー（リンククリックスルーの実際のドライバー）は、手動の煩雑なタスクではなく、組み込まれた低労力の機能になります。