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',
        },
      ],
    },
  };
}