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.0 | ImageResponse が next/server から next/og に移動 |
v13.3.0 | ImageResponse を next/server からインポート可能。 |
v13.0.0 | @vercel/og パッケージを通じて ImageResponse を導入。 |