GenerateMetadata for dynamic metadata in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this dynamic metadata function?

Consider this Next.js dynamic metadata function. What metadata will be generated for the page?

NextJS

export async function generateMetadata({ params }) {
  const { id } = params;
  return {
    title: `Post ${id}`,
    description: `Details about post ${id}`,
  };
}

// Assume params = { id: '42' }

A {"title":"Post id","description":"Details about post id"}

B {"title":"Post","description":"Details about post"}

C {"title":"Post 42","description":"Details about post 42"}

D {"title":"42","description":"42"}

💡 Hint

Look at how the id from params is used inside the template strings.

The function uses the id parameter to create a title and description dynamically. For id '42', it returns title 'Post 42' and description 'Details about post 42'.

📝 Syntax

intermediate

Which option causes a syntax error in generateMetadata?

Identify which generateMetadata function code snippet will cause a syntax error in Next.js.

A

export async function generateMetadata({ params }) {
  return {
    title: `Page ${params.slug}`,
  };
}

B

export async function generateMetadata({ params }) {
  return {
    title: `Page ${params.slug}`
  }
}

C

export async function generateMetadata({ params }) {
  return {
    title: 'Page ' + params.slug
  }
}

D

export async function generateMetadata(params) {
  return {
    title: `Page ${params.slug}`
  };
}

💡 Hint

Check for missing closing braces or parentheses.

Option B is missing the closing brace for the function, causing a syntax error.

❓ state_output

advanced

What metadata is generated when params.slug is undefined?

Given this generateMetadata function, what will be the output if params.slug is undefined?

NextJS

export async function generateMetadata({ params }) {
  return {
    title: `Page ${params.slug || 'default'}`,
    description: `Content for ${params.slug || 'default'}`
  };
}

A {"title":"Page null","description":"Content for null"}

B {"title":"Page undefined","description":"Content for undefined"}

C {"title":"Page ","description":"Content for "}

D {"title":"Page default","description":"Content for default"}

💡 Hint

Look at the fallback value used with || operator.

If params.slug is undefined, the || operator uses 'default' as fallback, so title and description include 'default'.

🔧 Debug

advanced

Why does this generateMetadata function cause a runtime error?

Examine the code and identify the cause of the runtime error when generateMetadata is called.

NextJS

export async function generateMetadata({ params }) {
  const data = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await data.json();
  return {
    title: post.title,
    description: post.summary
  };
}

// Assume params.id is undefined

A fetch URL is invalid because params.id is undefined, causing a network error

B post.title is undefined causing a TypeError

C data.json() is not a function causing a TypeError

D No error, function returns default metadata

💡 Hint

Check the URL used in fetch and the value of params.id.

If params.id is undefined, the fetch URL becomes invalid, causing a network error at runtime.

🧠 Conceptual

expert

Which option best describes the purpose of generateMetadata in Next.js dynamic routes?

Select the most accurate description of what generateMetadata does in Next.js dynamic routes.

A It dynamically creates metadata for each page request based on route parameters

B It statically generates metadata at build time for all pages regardless of params

C It replaces the need for a head component by injecting metadata client-side only

D It caches metadata on the client to improve page load speed

💡 Hint

Think about when and how metadata changes for dynamic routes.

generateMetadata runs on the server for each dynamic route to produce metadata based on route params, enabling dynamic SEO tags.