Menu

ImageResponse

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

ImageResponse では、次のオプションを使用できます：

import { ImageResponse } from 'next/og'
 
new ImageResponse(
  element: ReactElement,
  options: {
    width?: number = 1200
    height?: number = 630
    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
    fonts?: {
      name: string,
      data: ArrayBuffer,
      weight: number,
      style: 'normal' | 'italic'
    }[]
    debug?: boolean = false
 
    // HTTPレスポンスに渡されるオプション
    status?: number = 200
    statusText?: string
    headers?: Record<string, string>
  },
)

サポートされている CSS プロパティ

サポートされている HTML および CSS 機能の一覧については、Satoriのドキュメントを参照してください。

バージョン履歴

バージョン変更点
v14.0.0ImageResponse が next/server から next/og に移動
v13.3.0ImageResponse を next/server からインポート可能。
v13.0.0@vercel/og パッケージを通じて ImageResponse を導入。