generateMetadata

Export an asynchronous generateMetadata function from a Server Component page or layout. It can inspect route inputs and the parent segment's resolved metadata, then return a Metadata object; Next.js resolves the result into the document head.

export async function generateMetadata(props: Props, parent: ResolvingMetadata): Promise<Metadata>

A Promise resolving to a Metadata object containing one or more metadata fields.

import type { Metadata, ResolvingMetadata } from 'next'

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

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata,
): Promise<Metadata> {
  const { id } = await params
  const previousImages = (await parent).openGraph?.images || []

  return {
    title: `Product ${id}`,
    openGraph: {
      images: ['/products/cover.jpg', ...previousImages],
    },
  }
}

export default function Page() {
  return <h1>Product</h1>
}

This server-side route function derives metadata from route parameters and combines a new Open Graph image with metadata inherited from the parent segment.