Metadata API (static metadata) in NextJS - Step-by-Step Execution

Concept Flow - Metadata API (static metadata)

Define metadata object

↓

Export metadata

↓

Next.js reads metadata at build

↓

Static metadata applied to page

↓

Browser receives page with metadata

This flow shows how you define and export static metadata in Next.js, which Next.js reads at build time to add metadata to the page.

Execution Sample

NextJS

export const metadata = {
  title: 'Home Page',
  description: 'Welcome to our site',
};

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

Defines static metadata for a page and exports a simple React component.

Execution Table

Step	Action	Evaluation	Result
1	Read export 'metadata'	metadata object found	{ title: 'Home Page', description: 'Welcome to our site' }
2	Next.js processes metadata at build	Static metadata recognized	Metadata ready to inject in HTML head
3	Render Page component	JSX <h1>Hello</h1>	HTML <h1>Hello</h1> rendered
4	Inject metadata into HTML head	Add <title> and <meta>	<title>Home Page</title> and <meta name="description" content="Welcome to our site"> added
5	Send final HTML to browser	Page with metadata and content	Browser receives page with title and description
6	Exit	All steps complete	Static metadata applied successfully

💡 All metadata processed and page rendered with static metadata

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
metadata	undefined	{ title: 'Home Page', description: 'Welcome to our site' }	{ title: 'Home Page', description: 'Welcome to our site' }	{ title: 'Home Page', description: 'Welcome to our site' }

Key Moments - 2 Insights

Why does Next.js read the metadata object before rendering the page?

Next.js reads the exported metadata object at build time (see Step 2 in execution_table) to generate static HTML with metadata included, improving SEO and performance.

What happens if the metadata object is missing or empty?

If metadata is missing, Next.js will render the page without static metadata tags (no title or description), so SEO benefits are lost (not shown in execution_table but implied).

Visual Quiz - 3 Questions

Look at the execution_table, what is the metadata value after Step 1?

A {}

B undefined

C { title: 'Home Page', description: 'Welcome to our site' }

D null

💡 Hint

Check the 'Result' column in row for Step 1 in execution_table

At which step does Next.js inject the metadata into the HTML head?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look for the action mentioning 'Inject metadata into HTML head' in execution_table

If you change the metadata title, which step reflects that change in the execution_table?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Metadata value is first read and evaluated at Step 1

Concept Snapshot

Next.js static Metadata API:
- Export a 'metadata' object from your page file
- Next.js reads it at build time
- Metadata is injected into HTML head
- Improves SEO and page info
- Works only with static metadata (no runtime changes)

Full Transcript

This visual trace shows how Next.js handles static metadata. First, the metadata object is defined and exported from the page file. Next.js reads this metadata at build time before rendering the page. Then, it injects the metadata into the HTML head, adding the title and description tags. Finally, the page with metadata is sent to the browser. This process ensures metadata is static and improves SEO. If metadata is missing, the page renders without these tags. Changing metadata updates the content at build time only.

Practice

1. What is the primary purpose of exporting a metadata object in a Next.js page or layout?

easy

A. To provide static information like title and description for SEO and social sharing

B. To define dynamic routes for the page

C. To handle user authentication on the page

D. To style the page with CSS variables

Solution

1. Step 1: Understand the role of metadata in Next.js

   The metadata object is used to add static information such as page title and description.

2. Step 2: Connect metadata to SEO and social sharing

   This information helps search engines and social media platforms display the page correctly.

3. Final Answer:

   To provide static information like title and description for SEO and social sharing -> Option A

4. Quick Check:

   Metadata = SEO info [OK]

Hint: Metadata sets page info for SEO and sharing [OK]

Common Mistakes:

• Confusing metadata with routing or styling
• Thinking metadata handles user login
• Assuming metadata is dynamic by default

2. Which of the following is the correct way to export static metadata in a Next.js page?

easy

A. export default { metadata: { title: 'Home' } }

B. export function metadata() { return { title: 'Home' } }

C. export const metadata = { title: 'Home' }

D. const metadata = { title: 'Home' }; export metadata

Solution

1. Step 1: Recall the syntax for static metadata export

   Next.js expects a named export called metadata as an object.

2. Step 2: Check each option's syntax

   export const metadata = { title: 'Home' } correctly exports a constant object named metadata. The other options use incorrect export forms or syntax.

3. Final Answer:

   export const metadata = { title: 'Home' } -> Option C

4. Quick Check:

   Named export of object = export const metadata = { title: 'Home' } [OK]

Hint: Use named export const metadata = {...} [OK]

Common Mistakes:

• Using default export instead of named export
• Exporting a function instead of an object
• Incorrect export syntax causing errors

3. Given this metadata export in a Next.js page:

export const metadata = { title: 'About Us', description: 'Learn about our team' }

What will be the page's title shown in the browser tab?

medium

A. About Us

B. Learn about our team

C. metadata

D. No title will be shown

Solution

1. Step 1: Identify the title property in metadata

   The metadata object has a title set to 'About Us'.

2. Step 2: Understand how Next.js uses metadata

   Next.js uses the title property to set the browser tab's page title.

3. Final Answer:

   About Us -> Option A

4. Quick Check:

   Page title = metadata.title [OK]

Hint: Page title comes from metadata.title [OK]

Common Mistakes:

• Confusing description with title
• Expecting metadata object name as title
• Assuming no title is set without explicit <title> tag

4. You wrote this metadata export:

export const metadata = { title: 'Contact', description: Contact us page }

Why does this cause an error?

medium

A. export keyword is not allowed here

B. Missing quotes around the description string

C. title property cannot be 'Contact'

D. metadata must be a function, not an object

Solution

1. Step 1: Check the syntax of the description value

   The description value is written without quotes, which is invalid for strings in JavaScript.

2. Step 2: Understand JavaScript string syntax

   Strings must be enclosed in quotes (' or ") to be valid. Missing quotes cause a syntax error.

3. Final Answer:

   Missing quotes around the description string -> Option B

4. Quick Check:

   Strings need quotes [OK]

Hint: Always quote string values in metadata [OK]

Common Mistakes:

• Forgetting quotes around strings
• Thinking metadata must be a function
• Misplacing export keyword

5. You want to add static metadata with a title, description, and open graph image to a Next.js layout. Which is the correct way to include all these in the metadata export?

hard

A. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: { src: '/blog.png' } } }

B. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: '/blog.png' }

C. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { image: '/blog.png' } }

D. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: [{ url: '/blog.png' }] } }

Solution

1. Step 1: Understand openGraph image format in Next.js metadata

   The openGraph images property expects an array of objects with a url key.

2. Step 2: Check each option's openGraph structure

   export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: [{ url: '/blog.png' }] } } correctly uses an array with an object containing url. The other options use incorrect formats.

3. Final Answer:

   export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: [{ url: '/blog.png' }] } } -> Option D

4. Quick Check:

   openGraph images = array of {url} objects [OK]

Hint: Use array of objects with url for openGraph images [OK]

Common Mistakes:

• Using string instead of array for images
• Using wrong property name like image instead of images
• Not wrapping image url in an object