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

Поддерживаемые свойства CSS

Обратитесь к документации Satori для получения списка поддерживаемых HTML и CSS функций.

История версий

Версия	Изменения
`v14.0.0`	`ImageResponse` перемещен из `next/server` в `next/og`
`v13.3.0`	`ImageResponse` можно импортировать из `next/server`.
`v13.0.0`	`ImageResponse` представлен пакетом `@vercel/og`.