ImageResponseを使用したAPI自作画像をサイト上に表示させる方法

2024/06/20

Next.jsで、`ImageResponse`を使えばオリジナル画像が作成できます。
OG画像にして動的な画像生成に使用するのが一般的だと思います。
今回その画像をサイト上に表示する方法を試してみたので記そうと思います。

ImageResponseとは

Next.js の ImageResponse コンストラクタは、JSX と CSS を使用して動的な画像を生成するためのものです。
これは、Open Graph イメージや Twitter カードなどのソーシャルメディアの画像を生成するのに便利です。

画像の作成、APIの実装

// /app/api/image/route.tsx

import { ImageResponse } from "next/og";

export async function GET() {
  return new ImageResponse(
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        background: "#fff",
        padding: "20px"
      }}
    >
      <h1
        style={{
        fontSize: "70px",
        color: "#000",
        lineHeight: 1.2,
        }}
      >  
        画像のタイトルが入ります！！！
      </h1>
    </div>
  ),
  {
    width: 1200,
    height: 600
  }
}

ImageResponseでHTMLをそのまま画像としてレスポンスさせることができます。

詳しい実装方法は公式ドキュメントへ

Functions: ImageResponse | Next.js

API Reference for the ImageResponse constructor.

nextjs.org

動的な画像API

以下のようにパラメータを取得してデータ取得などを行えば、動的に表示させることも可能です。

// /app/api/image/[blogId]/route.tsx

export async function GET({ params }: { params: { blogId: string } }) {
  const { bolgId } = params;
  const blog = await fetch(
    `${process.env.NEXT_PUBLIC_APP_URL}/api/blog/${bolgId}`
  );
  // ...
}

画像を表示させる方法

// /components/blog/Image.tsx

import Image from "next/image";

// 画像表示コンポーネント
const ImageComponent = async ({ index, post }: PostItemNoImageProps) => {
 
　　　　const response = await fetch(
    `${process.env.NEXT_PUBLIC_APP_URL}/api/image`
  );
  const blob = await response.blob();

  return (
    <Image
      src={blob ? URL.createObjectURL(blob) : `/noImage.png`}
      alt="画像の説明"
      width={1200}
      height={600}
      className="rounded-md"
    />
  );
};