generateImageMetadata

Вы можете использовать generateImageMetadata для генерации различных версий одного изображения или возвращения нескольких изображений для одного сегмента маршрута. Это полезно, когда вы хотите избежать жёсткого кодирования значений метаданных, например, для иконок.

Параметры

Функция generateImageMetadata принимает следующие параметры:

params (необязательно)

Объект, содержащий параметры динамического маршрута от корневого сегмента до сегмента generateImageMetadata, из которого вызывается функция.

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

Маршрут	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' }`
`app/shop/[...slug]/icon.js`	`/shop/1/2`	`{ slug: ['1', '2'] }`

Возвращаемое значение

Функция generateImageMetadata должна возвращать массив объектов, содержащих метаданные изображения, такие как alt и size. Кроме того, каждый элемент обязательно должен содержать значение id, которое будет передано в свойства функции генерации изображения.

Объект метаданных изображения	Тип
`id`	`string` (обязательно)
`alt`	`string`
`size`	`{ width: number; height: number }`
`contentType`	`string`

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>
    )
  )
}

Примеры

Использование внешних данных

В этом примере используется объект params и внешние данные для генерации нескольких изображений Open Graph для сегмента маршрута.

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>
    )
  )
}

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

Версия	Изменения
`v13.3.0`	`generateImageMetadata` введен.

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata