Next.js - generateImageMetadata() Function

---

---

The generateImageMetadata() Function

The Next.js generateImageMetadata() function used to to generate different versions of one image or return multiple images for one route segment. This is helpful when you want to avoid hard-coding metadata values, such as for icons.

Syntax

Following is the syntax of generateImageMetadata function:

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

Parameters

The generateImageMetadata function does not take any parameters.

Return Value

The generateImageMetadata function returns an array of objects, each containing the contentType, size, and id of the image.

Example 1

In this example, we use the generateImageMetadata function to generate different versions of an icon image. The function returns an array of objects, each containing the contentType, size, and id of the image. We then use the ImageResponse class to return the icon image based on the id passed as a prop.

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

Example 2

In this example, we use the generateImageMetadata function to return multiple images for a specific route segment. The function takes a parameter id and returns an array of objects, each containing the size, alt text, and contentType of the image. We then use the getOGImages and getCaptionForImage functions to fetch the images and their captions from the database.

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 = (await params).id
  const imageId = id
  const text = await getCaptionForImage(productId, imageId)
 
  return new ImageResponse(
    (
      <div
        style={
          {
            // ...
          }
        }
      >
        {text}
      </div>
    )
  )
}