The Metadata API allows you to define your application's SEO and social sharing info (title, description, icons) using a declarative API.
Interactive Simulation Engine
Metadata Generation Lab
Automatic <head> Management
Server Execution
layout.tsx | page.tsx
export const metadata = {
title: 'Cosmos Lab',
description: '...'
}
Document <head>
Waiting for stream...
SEO indexing
Title and descriptions for Google
Social Graph
Previews for Twitter and LinkedIn
Standardization
Favicons, manifests, and more
The Process: Next.js automatically resolves your metadata (even if it's dynamic/async) andinjects it into the correct position in the HTML stream before it ever reaches the user.
Executable Code Workbench
page.tsx
Live Code Editor1// Static Metadata
2export const metadata = {
3 title: 'Home',
4 description: 'Welcome to my site'
5}
6
7// Dynamic Metadata
8export async function generateMetadata({ params }) {
9 const product = await getProduct(params.id)
10 return { title: product.name }
11}Mental Model
A business card for your page. It tells Google and social media sites what this page is about before they even look at the content.
Why This Exists
To provide a robust, type-safe way to manage <head> elements that works seamlessly with Server Components and Streaming.
Critical Note
"Developers often confuse this pattern with traditional client React. Use the Live Code Workbench above to simulate execution."