generateImageMetadata

Puede usar generateImageMetadata para generar diferentes versiones de una imagen o devolver múltiples imágenes para un segmento de ruta. Esto es útil cuando desea evitar valores de metadatos codificados, como para iconos.

Parámetros

La función generateImageMetadata acepta los siguientes parámetros:

`params` (opcional)

Un objeto que contiene los parámetros de ruta dinámica desde el segmento raíz hasta el segmento desde donde se llama a generateImageMetadata.

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

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

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

Retorno

La función generateImageMetadata debe retornar un array de objetos que contengan los metadatos de la imagen como alt y size. Además, cada elemento debe incluir un valor id que se pasará a los props de la función generadora de imágenes.

Objeto de Metadatos de Imagen	Tipo
`id`	`string` (requerido)
`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>
    )
  )
}

Ejemplos

Usando datos externos

Este ejemplo utiliza el objeto params y datos externos para generar múltiples imágenes Open Graph para un segmento de ruta.

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

Historial de versiones

Versión	Cambios
`v13.3.0`	Se introdujo `generateImageMetadata`.

Archivos de metadatos

Documentación de la API para las convenciones de archivos de metadatos.