Static route metadata
Set stable title, description, and other head metadata for a route.
Next.js 16+ · Interface
Metadata
The Metadata interface types the object used to configure a route's metadata in the Next.js App Router. Export it statically from a page or layout, or return it from generateMetadata for server-resolved dynamic metadata.
- Since
- 13.2
How it works
The Metadata interface describes the object used to configure page metadata such as titles and descriptions. Export a Metadata object from a Server Component page or layout for static values, or return one from generateMetadata when values depend on data; Next.js resolves it before rendering and emits the corresponding head elements.
Syntax
export const metadata: Metadata = { ... }
export async function generateMetadata(): Promise<Metadata> { ... }Returns
A Metadata object containing one or more metadata fields.
Key points
- The API offers a static object form and a dynamic function form.
- Both configuration mechanisms are server-only.
- Server-side resolution makes metadata available in the initial document.
Common mistakes
- Do not export Metadata configuration from a Client Component; keep the export in a Server Component.
Example: Static page metadata
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Products',
description: 'Browse available products.',
}
export default function ProductsPage() {
return <h1>Products</h1>
}Exports a typed static metadata object from a server page, allowing Next.js to generate the page's head elements.
When to use it
Data-dependent metadata
Build metadata from fetched product, article, or account data.
Layout-level defaults
Define metadata shared by all routes below a layout.
Interview questions
QWhat is the Metadata interface used for?
Metadata is the type for the configuration object used by the Metadata API. A page or layout can export a static object typed as Metadata, and Next.js uses it to produce the relevant head elements.
Follow-up: How would metadata depend on fetched data? Use generateMetadata in a Server Component and return a Metadata object after obtaining the required data.
QHow do you define static metadata in the App Router?
Static metadata is exported from a layout.js or page.js file as a Metadata object. This is appropriate when the values do not need request- or data-dependent computation.
Follow-up: Where should shared static metadata go? Put it in a higher layout so it applies to the routes beneath that layout.
QWhen should generateMetadata be used?
Use generateMetadata when metadata requires dynamic values or data fetching. It runs on the server, and the returned Metadata object is resolved before the page component is rendered.
Follow-up: Why must it remain server-side? Server resolution lets Next.js include the metadata in the initial HTML response.
Related
generateMetadatametadata objectMetadata fieldslayout.jspage.js