ImageResponse

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

ImageResponse で利用可能なオプションは以下の通りです：

import { ImageResponse } from 'next/server'

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 のドキュメントを参照してください。

バージョン履歴

バージョン	変更内容
`v13.3.0`	`next/server` から `ImageResponse` をインポート可能に。
`v13.0.0`	`@vercel/og` パッケージ経由で `ImageResponse` 導入。

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

バージョン履歴

On this page