generateImageMetadata, generateSitemaps, and generateViewport in Next.js — Dynamic Metadata for Images, Sitemaps, and Viewport Settings

1. generateImageMetadata — Create Multiple Versions of an Image

generateImageMetadata lets you generate multiple versions of an image (e.g. icons) or multiple images for a route segment. It returns an array of objects with id, size, alt, and contentType.

Basic Example:

export function generateImageMetadata() {
  return [
    { id: 'small', size: { width: 48, height: 48 }, contentType: 'image/png' },
    { id: 'medium', size: { width: 72, height: 72 }, contentType: 'image/png' },
  ]
}

Using Dynamic Params:

export function generateImageMetadata({ params }) {
  return [
    { id: params.slug, size: { width: 64, height: 64 }, contentType: 'image/png' },
  ]
}

Image Generation Function:

export default async function Icon({ id }) {
  const iconId = await id
  return new ImageResponse(<div>Icon {iconId}</div>)
}

2. generateSitemaps — Create Multiple Sitemap Files

generateSitemaps is used to split a sitemap into multiple files. It returns an array of { id } objects, which are then used to generate individual sitemap segments.

Example:

export async function generateSitemaps() {
  return [{ id: 0 }, { id: 1 }]
}

export default async function sitemap({ id }) {
  const start = id * 50000
  const end = start + 50000
  const products = await getProducts(`...`)
  return products.map((p) => ({
    url: `/product/${p.id}`,
    lastModified: p.date,
  }))
}

3. generateViewport — Dynamic Viewport Settings

To customize the initial viewport of a page, you can use either a static viewport object or a dynamic generateViewport function. These are only supported in Server Components.

Simple Example:

export const viewport = {
  themeColor: 'black',
}

With Media Queries:

export const viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'cyan' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
}

Dynamic Example with Params:

export function generateViewport({ params }) {
  return {
    themeColor: params.id === 'dark' ? 'black' : 'white',
  }
}

Conclusion

With generateImageMetadata, generateSitemaps, and generateViewport, you can dynamically generate metadata for images, sitemaps, and viewport settings. These features help you build scalable, personalized, and SEO-friendly applications in Next.js.