generateImageMetadata

Bir görüntünün farklı versiyonlarını oluşturmak veya bir rota segmenti için birden fazla görüntü döndürmek için generateImageMetadata adresini kullanabilirsiniz. Bu, simgeler gibi meta veri değerlerini sabit kodlamaktan kaçınmak istediğinizde kullanışlıdır.

Parameters

generateImageMetadata fonksiyonu aşağıdaki parametreleri kabul eder:

`params` (optional)

Kök segmentten generateImageMetadata adresinden çağrılan segmente kadar dinamik rota parametreleri nesnesini içeren bir nesne.

icon.tsx

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

Route	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'] }`

Returns

generateImageMetadata işlevi, alt ve size gibi görüntünün meta verilerini içeren nesnelerden oluşan bir array döndürmelidir. Ayrıca, her öğe, görüntü oluşturma işlevinin desteklerine aktarılacak bir id değeri içermelidir.

Image Metadata Object	Type
`id`	`string` (required)
`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>
    )
  )
}

Examples

Using external data

Bu örnek, bir rota segmenti için birden fazla Open Graph görüntüsü oluşturmak üzere params nesnesini ve harici verileri kullanır.

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

Version History

Version	Changes
`v13.3.0`	`generateImageMetadata` introduced.