GenerateStaticParams for static paths in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this GenerateStaticParams function output?

Consider this Next.js function that generates static paths for a blog. What will be the output of generateStaticParams()?

NextJS

export async function generateStaticParams() {
  const posts = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];
  return posts.map(post => ({ id: post.id }));
}

A [{ id: 'a' }, { id: 'b' }, { id: 'c' }]

B [{ params: { postId: 'a' } }, { params: { postId: 'b' } }, { params: { postId: 'c' } }]

C [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { params: { id: 'a' } }]

D [{ params: { id: 'a' } }, { params: { id: 'b' } }, { params: { id: 'c' } }]

💡 Hint

Remember that generateStaticParams returns an array of objects matching the dynamic segment keys.

The function returns an array of objects with keys matching the dynamic route segment names. Here, the dynamic segment is 'id', so each object has an 'id' key.

📝 Syntax

intermediate

Which option correctly defines generateStaticParams for dynamic route [slug]?

You have a dynamic route page at app/blog/[slug]/page.tsx. Which generateStaticParams function is syntactically correct and returns paths for slugs 'x' and 'y'?

A

export async function generateStaticParams() {
  return [{ params: { slug: 'x' } }, { params: { slug: 'y' } }];
}

B

export async function generateStaticParams() {
  return [{ slug: 'x' }, { slug: 'z' }];
}

C

export async function generateStaticParams() {
  return [{ slug: ['x', 'y'] }];
}

D

export async function generateStaticParams() {
  return [{ slug: 'x' }, { slug: 'y' }];
}

💡 Hint

The returned array should have objects with keys matching the dynamic segment name.

The correct syntax returns an array of objects with keys matching the dynamic segment 'slug'. Option D matches this exactly.

🔧 Debug

advanced

Why does this generateStaticParams cause a build error?

Given this code, why does Next.js fail to build static paths?

export async function generateStaticParams() {
  const data = await fetch('https://api.example.com/items');
  return data.map(item => ({ id: item.id }));
}

A Because the returned array must be wrapped inside a 'params' key.

B Because generateStaticParams cannot be async.

C Because fetch returns a Response object, not the parsed JSON array directly.

D Because the dynamic segment is missing in the returned objects.

💡 Hint

Check what fetch returns and how to get JSON data from it.

fetch returns a Response object. You must call response.json() to get the actual data array before mapping.

❓ state_output

advanced

What is the value of paths generated by this generateStaticParams?

Analyze this code snippet and determine the array returned by generateStaticParams:

export async function generateStaticParams() {
  const ids = ['1', '2'];
  return ids.flatMap(id => [{ id }, { id: id + '-extra' }]);
}

A [{ id: '1' }, { id: '1-extra' }, { id: '2' }, { id: '2-extra' }]

B [{ id: '1' }, { id: '2' }]

C [{ id: '1-extra' }, { id: '2-extra' }]

D [{ id: '1' }, { id: '2' }, { id: '1-extra' }, { id: '2-extra' }]

💡 Hint

flatMap combines arrays returned by the callback into one array.

flatMap calls the callback for each id and concatenates the arrays returned. So for '1' it returns [{id:'1'}, {id:'1-extra'}], same for '2'.

🧠 Conceptual

expert

Which statement about generateStaticParams in Next.js is true?

Select the correct statement about the behavior and usage of generateStaticParams in Next.js App Router.

A generateStaticParams runs on every client request to fetch dynamic paths.

B generateStaticParams runs at build time and must return an array of objects matching dynamic route segments without wrapping in 'params'.

C generateStaticParams can only return a single object, not an array.

D generateStaticParams requires returning objects with a 'params' key wrapping the dynamic segments.

💡 Hint

Think about when generateStaticParams runs and the shape of its return value in Next.js 13+ App Router.

In Next.js App Router, generateStaticParams runs at build time and returns an array of objects with keys matching dynamic segments directly, no 'params' wrapper.