generateImageMetadata

generateImageMetadata를 사용하여 하나의 이미지의 다양한 버전을 생성하거나 하나의 경로 세그먼트에 대해 여러 이미지를 반환할 수 있습니다. 이는 아이콘과 같은 메타데이터 값을 하드 코딩하는 것을 피하고자 할 때 유용합니다.

매개변수

generateImageMetadata 함수는 다음 매개변수를 수락합니다:

`params` (선택 사항)

루트 세그먼트부터 generateImageMetadata가 호출된 세그먼트까지의 동적 경로 매개변수 객체를 포함하는 객체입니다.

icon.tsx

export function generateImageMetadata({
  params,
}: {
  params: { slug: string }
}) {
  // ...
}

icon.js

export function generateImageMetadata({ params }) {
  // ...
}

경로	URL	`params`
`app/shop/icon.js`	`/shop`	`undefined`
`app/shop/[slug]/icon.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/icon.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`

반환 값

generateImageMetadata 함수는 alt 및 size와 같은 이미지의 메타데이터를 포함하는 객체 배열을 반환해야 합니다. 또한 각 항목에는 반드시 id 값이 포함되어야 하며, 이는 이미지 생성 함수의 props로 전달됩니다.

이미지 메타데이터 객체	타입
`id`	`string` (필수)
`alt`	`string`
`size`	`{ width: number; height: number }`
`contentType`	`string`

icon.tsx

import { ImageResponse } from 'next/og'
 
export function generateImageMetadata() {
  return [
    {
      contentType: 'image/png',
      size: { width: 48, height: 48 },
      id: 'small',
    },
    {
      contentType: 'image/png',
      size: { width: 72, height: 72 },
      id: 'medium',
    },
  ]
}
 
export default function Icon({ id }: { id: string }) {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 88,
          background: '#000',
          color: '#fafafa',
        }}
      >
        Icon {id}
      </div>
    ),
  )
}

icon.js

import { ImageResponse } from 'next/og'
 
export function generateImageMetadata() {
  return [
    {
      contentType: 'image/png',
      size: { width: 48, height: 48 },
      id: 'small',
    },
    {
      contentType: 'image/png',
      size: { width: 72, height: 72 },
      id: 'medium',
    },
  ]
}
 
export default function Icon({ id }) {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 88,
          background: '#000',
          color: '#fafafa',
        }}
      >
        Icon {id}
      </div>
    ),
  )
}

예시

외부 데이터를 사용하는 경우

이 예제는 params 객체와 외부 데이터를 사용하여 경로 세그먼트에 대해 여러 오픈 그래프 이미지를 생성합니다.

app/products/[id]/opengraph-image.tsx

import { ImageResponse } from 'next/og'
import { getCaptionForImage, getOGImages } from '@/app/utils/images'
 
export async function generateImageMetadata({
  params,
}: {
  params: { id: string }
}) {
  const images = await getOGImages(params.id)
 
  return images.map((image, idx) => ({
    id: idx,
    size: { width: 1200, height: 600 },
    alt: image.text,
    contentType: 'image/png',
  }))
}
 
export default async function Image({
  params,
  id,
}: {
  params: { id: string }
  id: number
}) {
  const productId = params.id
  const imageId = id
  const text = await getCaptionForImage(productId, imageId)
 
  return new ImageResponse(
    (
      <div
        style={
          {
            // ...
          }
        }
      >
        {text}
      </div>
    ),
  )
}

app/products/[id]/opengraph-image.js

import { ImageResponse } from 'next/og'
import { getCaptionForImage, getOGImages } from '@/app/utils/images'
 
export async function generateImageMetadata({ params }) {
  const images = await getOGImages(params.id)
 
  return images.map((image, idx) => ({
    id: idx,
    size: { width: 1200, height: 600 },
    alt: image.text,
    contentType: 'image/png',
  }))
}
 
export default async function Image({ params, id }) {
  const productId = params.id
  const imageId = id
  const text = await getCaptionForImage(productId, imageId)
 
  return new ImageResponse(
    (
      <div
        style={
          {
            // ...
          }
        }
      >
        {text}
      </div>
    ),
  )
}

버전 기록

버전	변경 사항
`v13.3.0`	`generateImageMetadata` 도입.

Fetch Generate Metadata