Next.js App Router で SSG ビルド時に 動的に OGP を生成する.

<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明" />
<meta property="og:type" content="website" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイト名" />

<meta property="og:image" content="<generated>" />
<meta property="og:image:type" content="<generated>" />
<meta property="og:image:width" content="<generated>" />
<meta property="og:image:height" content="<generated>" />
 
<meta name="twitter:image" content="<generated>" />
<meta name="twitter:image:type" content="<generated>" />
<meta name="twitter:image:width" content="<generated>" />
<meta name="twitter:image:height" content="<generated>" />

import path from "path";
import { readFile } from "fs/promises";
import { ImageResponse } from "next/og";
 
// ビルド時に静的に生成することを指定
export const dynamic = "force-static";
// 生成されなかった場合、404 を返す
export const dynamicParams = false;
 
interface Post {
  slug: string;
  title: string;
}
 
// テスト用のデータ
const testPosts: Post[] = [
  {
    slug: "test-post-1",
    title: "Test Post 1",
  },
  {
    slug: "test-post-2",
    title: "Test Post 2",
  },
];
 
// 動的なパラメータを事前に静的に生成するため
export async function generateStaticParams() {
  return testPosts.map((post) => ({
    slug: post.slug,
  }));
}
 
export async function GET(_: Request, { params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = testPosts.find((post) => post.slug === slug);
 
  if (!post) {
    return new Response("Not Found", { status: 404 });
  }
 
  try {
    // ビルド時に取得可能な画像のURLやデータがない場合、プロジェクト上の画像ファイルを使用したい場合は、以下のようにして読み込むことができます。
    const bgData = await readFile(path.join(process.cwd(), "public", "opengraph-image-bg.png"));
    const bgSrc = Uint8Array.from(bgData).buffer;
 
    const fontData = await loadFont(post.title);
 
    return new ImageResponse(
      <div
        style={{
          fontFamily: "Noto Sans JP",
          fontWeight: 700,
          fontSize: 48,
          color: "white",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
          height: "100%",
        }}
      >
        <img src={bgSrc} tw="w-full h-full object-cover" />
        <div tw="flex flex-col items-center justify-center w-full h-full">
          <div tw="text-4xl font-bold text-white">{post.title}</div>
        </div>
      </div>,
      {
        fonts: [
          {
            name: "Noto Sans JP",
            data: fontData,
            style: "normal",
            weight: 700,
          },
        ],
        width: 1200,
        height: 630,
      },
    );
  } catch (error) {
    console.error("OG image generation error:", error);
    return new Response("Failed to create OG image", { status: 500 });
  }
}

export async function loadFont(subset: string) {
  try {
    // Google Fonts からサブセット化したフォントを取得
    const fontResponse = await fetch(
      `https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&text=${encodeURIComponent(subset)}`,
    );
 
    if (!fontResponse.ok) {
      throw new Error("Failed to fetch font CSS");
    }
 
    const fontCss = await fontResponse.text();
    const fontUrl = fontCss.match(/url\((.*?)\)/)?.[1];
 
    if (!fontUrl) {
      throw new Error("Failed to extract font URL");
    }
 
    const fontDataResponse = await fetch(fontUrl);
    if (!fontDataResponse.ok) {
      throw new Error("Failed to fetch font data");
    }
 
    const fontData = await fontDataResponse.arrayBuffer();
 
    return fontData;
  } catch (error) {
    console.error(error);
    return new Response("Failed to load font", { status: 500 });
  }
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata | undefined> {
  const { slug } = await params;
 
  return {
    openGraph: {
      images: [
        {
          url: `https://example.com/posts/${slug}/og.png`,
          width: 1200,
          height: 630,
          alt: `Post ${slug}`,
          type: "image/png",
        },
      ],
    },
  };
}