ImageResponse

El constructor ImageResponse le permite generar imágenes dinámicas utilizando JSX y CSS. Esto es útil para generar imágenes para redes sociales como imágenes Open Graph, tarjetas de Twitter y más.

Las siguientes opciones están disponibles para 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

    // Opciones que se pasarán a la respuesta HTTP
    status?: number = 200
    statusText?: string
    headers?: Record<string, string>
  },
)

Propiedades CSS admitidas

Consulte la documentación de Satori para obtener una lista de las funciones HTML y CSS admitidas.

Historial de versiones

VersiónCambios
v14.0.0ImageResponse se movió de next/server a next/og
v13.3.0ImageResponse puede importarse desde next/server.
v13.0.0ImageResponse introducido mediante el paquete @vercel/og.