`generateMetadata()`

Generates dynamic <head> metadata based on route params or fetched data.

Since Next 13.2 (App Router) Spec ↗

Syntax

export async function generateMetadata({ params }): Promise<Metadata>

Parameters

Name	Type	Required	Description
`props`	`{ params: Promise<...>, searchParams: Promise<...> }`	No	Async route params/search params (Next 15).
`parent`	`Promise<ResolvedMetadata>`	No	Resolved metadata from parent segments to extend.

Returns

Promise<Metadata> | Metadata — Metadata merged into the document head.

Examples

import type { Metadata } from 'next'

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { images: [post.cover] },
  }
}

export async function generateMetadata(
  _props,
  parent
): Promise<Metadata> {
  const previousImages = (await parent).openGraph?.images ?? []
  return { openGraph: { images: [...previousImages, '/og.png'] } }
}

Notes

Export from `layout.js` or `page.js` (Server Components only). Use the static `metadata` object when values are not dynamic. Fetch calls here are deduplicated with the page's own fetches. Cannot be used in Client Components. Next 15: `params`/`searchParams` are Promises.