はじめに

今回は動的なOGP画像の生成方法について触れたいと思います。
公式ドキュメントにも記載があるのですが、実際に実装する際にちょっと苦戦したので備忘録としても。

環境

・Next.js 15.0.3
・React 19.0.0-rc
・next/og（ImageResponse）
・Edge Runtime
・tailwind.css

※Next.js15なのはちょっと試しに触ってみたついでです。Next.js14でも動作します。　

page.tsx

まずは今回わかりやすいように、簡単なUIとしてpage.tsxでタイトルと説明文を入力し、動的にOGP画像とURLが表示されるものを作りました。
実際はOGP画像なので、SNSにシェアする際に生成したURLなりを加工してシェアしたり、といった感じで使うことが多いと思います。

// page.tsx

"use client";
import Image from "next/image";
import { useState } from "react";
import { generateOgpImage } from "./actions";

export default function Home() {
  const [imageUrl, setImageUrl] = useState<string | null>(null);
  const [isPending, setIspendig] = useState(false);

  const handleSubmit = async (formData: FormData) => {
    setIspendig(true);
    const title = formData.get("title") as string;
    const description = formData.get("description") as string;
    const data = {
      title,
      description,
    };
    const imageUrl = await generateOgpImage(data);
    if (imageUrl) {
      setImageUrl(imageUrl);
    }
    setIspendig(false);
  };

  return (
    <div className="max-w-3xl mx-auto p-6 font-sans">
      <h1 className="text-4xl font-bold text-center text-gray-800 mb-8">
        動的なOGP画像の生成
      </h1>
      <section className="bg-gray-100 rounded-lg p-6 shadow-md">
        <h2 className="text-2xl font-semibold text-gray-700 mb-4">
          任意のOGP画像を生成します
        </h2>
        <article>
          <form action={handleSubmit} className="space-y-4">
            <input
              type="text"
              name="title"
              placeholder="タイトル"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <input
              type="text"
              name="description"
              placeholder="説明文"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <button
              type="submit"
              className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition duration-300 ease-in-out"
              disabled={isPending}
            >
              {isPending ? "生成中・・・" : "生成"}
            </button>
          </form>
          {imageUrl && (
            <>
              <div className="mt-4 w-full">
                <Image
                  src={imageUrl}
                  alt="OGP画像"
                  width={1200}
                  height={630}
                  layout="responsive"
                  className="rounded-lg shadow-md"
                />
              </div>
              <div>
                <p>画像URL: {imageUrl}</p>
              </div>
            </>
          )}
        </article>
      </section>
    </div>
  );
}

actions.ts

getUrlはおまけなので、気になる方は下記のリポジトリからソースコードをご覧ください。ただ単にlocalhostなのか本番用URLなのかを切り分けて組めるようにしてあるだけです。

本題はここからです。まず、appディレクトリ直下でapi/ogディレクトリを作成し、route.tsxファイルを作成します。
ここで、next/ogを使って、リクエストに含まれるタイトルと説明文を利用した動的な画像を生成し返却します。

// api/og/route.tsx

import { ImageResponse } from "next/og";
import { NextRequest } from "next/server";

export const runtime = "edge";

export async function POST(request: NextRequest) {
  try {
    const { title, description } = await request.json();

    return new ImageResponse(
      (
        <div
          style={{
            width: "100%",
            height: "100%",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "#fff5d6",
            fontFamily: "sans-serif",
            border: "32px #f3971a solid",
          }}
        >
          <h1
            style={{
              fontSize: "64px",
              fontWeight: "bold",
              color: "#1f2937",
              marginBottom: "24px",
              textAlign: "center",
            }}
          >
            {title}
          </h1>
          <p
            style={{
              fontSize: "32px",
              color: "#4b5563",
              textAlign: "center",
              maxWidth: "80%",
            }}
          >
            {description}
          </p>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (error) {
    return new Response(`動的なOGP画像の生成ができませんでした: ${error}`, {
      status: 500,
    });
  }
}

page.tsxは今回クライアントコンポーネントとして利用したかったので、actions.tsを別につくって、generateOgpImage関数を定義、そこからapiをフェッチするようにしています。
apiからの返却値をblobとして受け取り、URL.createObjectURLでimageUrlを生成し、page.tsxに返却します。

// actions.ts

import { getUrl } from "@/app/utils/getUrl";

export async function generateOgpImage(data: {
  title: string;
  description: string;
}): Promise<string | null> {
  try {
    const baseUrl = getUrl();
    const res = await fetch(`${baseUrl}/api/og`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    if (!res.ok) {
      throw new Error("OGP画像の生成に失敗しました。");
    }

    const blob = await res.blob();
    const imageUrl = URL.createObjectURL(blob);
    return imageUrl;
  } catch (error) {
    console.log(error);
    return null;
  }
}

これで、page.tsx側でそれを受け取って「生成」ボタンが押されるたびに動的なOGP画像が表示されます。
同じ要領で画像を配置したり、CSSでいろいろできますね。

補足

ちなみに、今回はSNSへのシェアを想定した動的なOGP画像の生成の実装方法を紹介しましたが、
公式ドキュメントに記載のある通り、ディレクトリごとに「opengraph-image.tsx」を配置して、同じようにnext/ogを使った動的なOGP画像の生成を行うことも可能です。
めちゃくちゃ便利ですね。

Satoriとの違い

あと、よくnext/ogと比較される話題のsatoriとどう違うの？と気になったので簡単に調べてみました。
Next.js使うならnext/ogが使いやすいみたいですが、出力形式をSVGにしたかったりより柔軟にカスタマイズしたい時などはSatoriを使う、という感じでしょうか。Satoriは使ったことがないので、使う機会あればこちらもご紹介したいと思います。

それではまた。

HTNCode