Metadata API (static metadata) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the page title rendered by this Next.js static metadata?

Given this Next.js page component with static metadata, what will be the page title shown in the browser tab?

NextJS

export const metadata = {
  title: 'Welcome to My Site',
  description: 'A simple Next.js app'
};

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

A A simple Next.js app

B Welcome to My Site

C Hello World

D Page

💡 Hint

Look at the metadata object and see which property sets the page title.

The 'title' property inside the static metadata object sets the page title shown in the browser tab.

📝 Syntax

intermediate

Which option correctly defines static metadata in a Next.js page?

Choose the correct syntax to define static metadata for a Next.js page component.

A export const metadata = { title: 'Home' };

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

C const metadata = { title: 'Home' }; export default metadata;

D export default function metadata() { return { title: 'Home' }; }

💡 Hint

Static metadata must be exported as a constant object, not a function or default export.

Next.js expects static metadata as a named export constant object called 'metadata'.

❓ state_output

advanced

What is the description meta tag content rendered by this static metadata?

Given this static metadata in a Next.js page, what will be the content of the description meta tag in the HTML?

NextJS

export const metadata = {
  title: 'About Us',
  description: 'Learn more about our company and team.'
};

export default function About() {
  return <main><h1>About</h1></main>;
}

A About Us

B No description meta tag is rendered

C About

D Learn more about our company and team.

💡 Hint

The 'description' property in metadata sets the meta description tag content.

The 'description' property in the static metadata object sets the content of the meta description tag in the HTML head.

🔧 Debug

advanced

Why does this static metadata not update the page title?

This Next.js page has static metadata but the browser tab title remains 'Document'. What is the likely cause?

NextJS

const metadata = {
  title: 'Dashboard'
};

export default function Dashboard() {
  return <main><h1>Dashboard</h1></main>;
}

A The page component must be named 'Page' for metadata to work.

B The title property must be inside a function, not an object.

C The metadata object is not exported, so Next.js ignores it.

D Static metadata only works in server components, not client components.

💡 Hint

Check if the metadata object is properly exported for Next.js to detect it.

Next.js requires the metadata object to be exported with 'export const metadata' to apply it.

🧠 Conceptual

expert

Which statement about Next.js static metadata is TRUE?

Select the true statement about how static metadata works in Next.js 14+.

A Static metadata is defined as a named export and is used to generate HTML head tags at build time.

B Static metadata can be dynamically changed at runtime based on user input.

C Static metadata requires a special hook to update the page title after rendering.

D Static metadata must be defined inside the page component function to take effect.

💡 Hint

Think about when static metadata is processed and how it affects the HTML.

Static metadata is a named export object used by Next.js at build time to generate head tags, not changed dynamically.

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