generateImageMetadata

Vous pouvez utiliser generateImageMetadata pour générer différentes versions d'une image ou retourner plusieurs images pour un segment de route. C'est utile lorsque vous souhaitez éviter de coder en dur les valeurs de métadonnées, comme pour les icônes.

Paramètres

La fonction generateImageMetadata accepte les paramètres suivants :

`params` (optionnel)

Un objet contenant les paramètres de route dynamique depuis le segment racine jusqu'au segment depuis lequel generateImageMetadata est appelée.

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

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

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

Retours

La fonction generateImageMetadata doit retourner un tableau d'objets contenant les métadonnées de l'image comme alt et size. De plus, chaque élément doit inclure une valeur id qui sera passée aux props de la fonction de génération d'image.

Objet de métadonnées d'image	Type
`id`	`string` (requis)
`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>
    )
  )
}

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

Exemples

Utilisation de données externes

Cet exemple utilise l'objet params et des données externes pour générer plusieurs images Open Graph pour un segment de route.

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

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

Historique des versions

Version	Changements
`v13.3.0`	`generateImageMetadata` introduite.

Fichiers de métadonnées

Documentation de l'API pour les conventions des fichiers de métadonnées.