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.

Practice

1. What is the main purpose of the generateMetadata function in Next.js?

easy

A. To fetch data on the client after page load

B. To handle client-side routing between pages

C. To create dynamic page titles and descriptions before rendering

D. To style components dynamically using CSS

Solution

1. Step 1: Understand the role of generateMetadata

   This function runs on the server before the page renders to set metadata dynamically.

2. Step 2: Identify its main use

   It is used to create dynamic page titles and descriptions for SEO and relevant info.

3. Final Answer:

   To create dynamic page titles and descriptions before rendering -> Option C

4. Quick Check:

   Dynamic metadata = To create dynamic page titles and descriptions before rendering [OK]

Hint: Remember: generateMetadata sets SEO info before page loads [OK]

Common Mistakes:

• Confusing generateMetadata with client-side data fetching
• Thinking it handles routing or styling
• Assuming it runs on the client

2. Which of the following is the correct syntax to export a generateMetadata function in a Next.js page?

easy

A. export const generateMetadata = () => { document.title = 'Page' }

B. export async function generateMetadata() { return { title: 'Page' } }

C. function generateMetadata() { console.log('metadata') } export generateMetadata

D. export default function generateMetadata() { return Page }

Solution

1. Step 1: Recall correct export syntax

   Next.js expects generateMetadata as an exported async function returning an object with metadata.

2. Step 2: Check each option

   export async function generateMetadata() { return { title: 'Page' } } correctly exports an async function returning an object with a title property.

3. Final Answer:

   export async function generateMetadata() { return { title: 'Page' } } -> Option B

4. Quick Check:

   Correct export syntax = export async function generateMetadata() { return { title: 'Page' } } [OK]

Hint: Use async function returning object for generateMetadata [OK]

Common Mistakes:

• Using default export instead of named export
• Returning JSX instead of an object
• Trying to set document.title inside generateMetadata

3. Given this generateMetadata function, what will be the page title?

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

And the URL is /user/jane.

medium

A. User: jane

B. User: params.username

C. User: undefined

D. User: /user/jane

Solution

1. Step 1: Understand parameter usage

   The function receives params with username from the URL segment.

2. Step 2: Substitute params.username with actual value

   Since URL is /user/jane, params.username is 'jane', so title becomes 'User: jane'.

3. Final Answer:

   User: jane -> Option A

4. Quick Check:

   Dynamic title uses params.username = User: jane [OK]

Hint: URL params fill template strings in generateMetadata [OK]

Common Mistakes:

• Using literal string 'params.username' instead of value
• Assuming params is undefined without route setup
• Confusing URL path with metadata title

4. What is wrong with this generateMetadata function?

export function generateMetadata() {
  return { title: 'Home' }
  console.log('Metadata generated')
}

medium

A. generateMetadata cannot be a named export

B. The function must be async to work

C. The return value must be a string, not an object

D. The console.log runs after return and is unreachable

Solution

1. Step 1: Analyze function flow

   The return statement ends the function immediately, so code after it won't run.

2. Step 2: Identify unreachable code

   The console.log after return is unreachable and will never execute.

3. Final Answer:

   The console.log runs after return and is unreachable -> Option D

4. Quick Check:

   Code after return is unreachable = The console.log runs after return and is unreachable [OK]

Hint: Code after return is ignored, place logs before return [OK]

Common Mistakes:

• Thinking function must be async always
• Expecting return to accept strings only
• Confusing export types

5. You want to create dynamic metadata for a blog post page that shows the post title and author. Which generateMetadata implementation correctly handles this using params and fetch to get post data asynchronously?

hard

A. export async function generateMetadata({ params }) {
const post = await fetch(`/api/posts/${params.id}`).then(res => res.json());
return { title: post.title, description: `By ${post.author}` };
}

B. export function generateMetadata({ params }) {
const post = fetch(`/api/posts/${params.id}`).then(res => res.json());
return { title: post.title, description: `By ${post.author}` };
}

C. export async function generateMetadata() {
const post = await fetch('/api/posts').then(res => res.json());
return { title: post.title, description: post.author };
}

D. export async function generateMetadata({ params }) {
return { title: params.title, description: params.author };
}

Solution

1. Step 1: Identify async data fetching

   To get post data dynamically, generateMetadata must be async and await the fetch call.

2. Step 2: Check usage of params and fetch

   export async function generateMetadata({ params }) { const post = await fetch(`/api/posts/${params.id}`).then(res => res.json()); return { title: post.title, description: `By ${post.author}` }; } correctly awaits fetch with params.id and returns metadata using fetched data.

3. Final Answer:

   export async function generateMetadata({ params }) { const post = await fetch(`/api/posts/${params.id}`).then(res => res.json()); return { title: post.title, description: `By ${post.author}` }; } -> Option A

4. Quick Check:

   Async fetch with params used correctly = export async function generateMetadata({ params }) { const post = await fetch(`/api/posts/${params.id}`).then(res => res.json()); return { title: post.title, description: `By ${post.author}` }; } [OK]

Hint: Use async/await with params to fetch dynamic metadata [OK]

Common Mistakes:

• Not awaiting fetch causing unresolved promises
• Ignoring params and fetching all posts
• Returning params directly without fetching data