動的パラメータ（[]）から動的に作成

動的な情報（例：title や description）をCanva等で作成したOGP用画像に配置。あるいはCSSでカードデザインを書く。
OGPの確認：https://www.opengraph.xyz/

route.tsx

/app/api/og/[slug]/route.tsx ：*拡張子は .ts ではなく.tsx

import { ImageResponse } from "next/og";
import { prisma } from "@/prisma";

export async function GET(
  req: NextRequest,
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params;
  const post = await prisma.posts.findUnique({
    where: { slug },
  });

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
          {post?.title}
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

new ImageResponse() の中は <Elements> と {options}
- https://nextjs.org/docs/app/api-reference/functions/image-response
画像を使う場合は絶対URLにする

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          background: "#111",
          color: "white",
          fontSize: 48,
          position: "relative",
        }}
      >
        <img
          src={imageUrl}
          style={{
            position: "absolute",
            width: "100%",
            height: "100%",
            objectFit: "cover",
            opacity: 0.7,
          }}
        />
        {post?.title}
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );

page.tsx

app/[slug]/page.tsx：

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await prisma.table.findUnique({
    where: {
      slug: slug,
    },
  });

  if (post) {
    return {
      title: `${post.title}`,
      openGraph: {
        title: `${post.title}`,
        images: {
          url: `${BASE_URL}/api/og/${post.slug}`,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      },
    };
  }
}

generateMetadata でmetadataを動的に生成
openGraph.images.urlは絶対URL
*注意：SSGとしてビルドしたとしてもリクエスト時に画像が生成される

Nextjs：ImageResponse（OGP用の動的な画像生成）