︙

ImageResponse

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

次の options が 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

    // Options that will be passed to the HTTP response
    status?: number = 200
    statusText?: string
    headers?: Record<string, string>
  },
)

Supported CSS Properties

サポートされている HTML と CSS の機能のリストについては、Satori のドキュメンテーションを参照してください。

Version History

Version	Changes
`v14.0.0`	`ImageResponse` は `next/server` から `next/og` に移動しました
`v13.3.0`	`ImageResponse`は`next/server`からインポートできます。
`v13.0.0`	`ImageResponse`が`@vercel/og`パッケージを通じて導入されました。