generateImageMetadata

Export generateImageMetadata from an image special file to describe multiple image variants for one route segment. Each returned item supplies a required id plus optional accessibility text, dimensions, and content type; the default image function receives that id as a promise.

export function generateImageMetadata({ params }: { params: { slug: string } }) { return [{ id: '1' }] }

An array of image metadata objects. Every item requires an id; supported metadata includes alt, size, and contentType.

import { ImageResponse } from 'next/og'

type Props = {
  params: Promise<{ slug: string }>
  id: Promise<string>
}

export async function generateImageMetadata() {
  return [
    { id: 'light', alt: 'Light theme', size: { width: 1200, height: 630 }, contentType: 'image/png' },
    { id: 'dark', alt: 'Dark theme', size: { width: 1200, height: 630 }, contentType: 'image/png' },
  ]
}

export default async function Image({ id }: Props) {
  const imageId = await id
  return new ImageResponse(
    <div style={{ background: imageId === 'dark' ? '#111' : '#fff', color: imageId === 'dark' ? '#fff' : '#111', padding: 40 }}>
      {imageId} theme
    </div>,
  )
}

Returns two image variants; Next.js passes the selected metadata item's id to the image generator as a promise.