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`	`ImageResponse`가 `@vercel/og` 패키지를 통해 도입됨

headers nextRequest