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.

Practice

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

easy

A. To tell Next.js which dynamic routes to pre-render at build time

B. To fetch data on every user request

C. To handle client-side navigation between pages

D. To define API routes in Next.js

Solution

1. Step 1: Understand the role of generateStaticParams

   This function is used to specify dynamic route parameters for static generation.

2. Step 2: Compare with other Next.js features

   Unlike client-side navigation or API routes, generateStaticParams runs at build time to pre-build pages.

3. Final Answer:

   To tell Next.js which dynamic routes to pre-render at build time -> Option A

4. Quick Check:

   generateStaticParams = pre-render dynamic routes [OK]

Hint: Remember: generateStaticParams runs at build time for static pages [OK]

Common Mistakes:

• Confusing generateStaticParams with client-side data fetching
• Thinking it runs on every request
• Mixing it up with API route definitions

2. Which of the following is the correct syntax for generateStaticParams in a Next.js dynamic route file?

easy

A. export function generateStaticParams() { return ['1', '2']; }

B. export async function generateStaticParams() { return [{ id: '1' }, { id: '2' }]; }

C. export async function getStaticPaths() { return [{ params: { id: '1' } }]; }

D. export default function generateStaticParams() { return { paths: ['1', '2'] }; }

Solution

1. Step 1: Recall the correct return format

   generateStaticParams returns an array of objects with route parameters as keys.

2. Step 2: Check syntax correctness

   export async function generateStaticParams() { return [{ id: '1' }, { id: '2' }]; } correctly exports an async function returning [{ id: '1' }, { id: '2' }]. Others have wrong return types or use getStaticPaths.

3. Final Answer:

   export async function generateStaticParams() { return [{ id: '1' }, { id: '2' }]; } -> Option B

4. Quick Check:

   Return array of param objects = export async function generateStaticParams() { return [{ id: '1' }, { id: '2' }]; } [OK]

Hint: generateStaticParams returns array of objects with params keys [OK]

Common Mistakes:

• Using getStaticPaths instead of generateStaticParams
• Returning array of strings instead of objects
• Not exporting the function properly

3. Given this generateStaticParams function, what static paths will Next.js generate?

export async function generateStaticParams() {
  return [
    { slug: 'home' },
    { slug: 'about' },
    { slug: 'contact' }
  ];
}

medium

A. /home, /about, /contact

B. /slug/home, /slug/about, /slug/contact

C. /, /about, /contact

D. /home, /about, /contact, /blog

Solution

1. Step 1: Understand the returned params

   The function returns an array with slug keys: 'home', 'about', 'contact'.

2. Step 2: Map params to URLs

   Next.js uses these slugs as dynamic route parts, so paths are /home, /about, /contact.

3. Final Answer:

   /home, /about, /contact -> Option A

4. Quick Check:

   Params slug values = generated paths [OK]

Hint: Params keys map directly to URL segments in static paths [OK]

Common Mistakes:

• Adding extra path segments like /slug/
• Assuming root path / is included automatically
• Including paths not returned by generateStaticParams

4. Identify the error in this generateStaticParams function:

export async function generateStaticParams() {
  return [
    { id: 1 },
    { id: 2 },
    { id: 3 }
  ]
}

medium

A. There is no error; this is correct syntax

B. The function must return an object, not an array

C. The function must be named getStaticPaths instead

D. The id values should be strings, not numbers

Solution

1. Step 1: Check parameter types

   Route parameters in Next.js must be strings because URLs are strings.

2. Step 2: Identify type mismatch

   Here, id values are numbers (1, 2, 3), which can cause build errors or unexpected behavior.

3. Final Answer:

   The id values should be strings, not numbers -> Option D

4. Quick Check:

   Route params must be strings [OK]

Hint: Always use strings for route parameters in generateStaticParams [OK]

Common Mistakes:

• Returning numbers instead of strings for params
• Confusing generateStaticParams with getStaticPaths
• Returning object instead of array

5. You want to statically generate blog post pages with slugs from an API. Which generateStaticParams implementation correctly fetches slugs and returns them for static generation?

async function fetchSlugs() {
  return ['post-1', 'post-2', 'post-3'];
}

Choose the correct code:

hard

A. export async function generateStaticParams() {
const slugs = await fetchSlugs();
return slugs;
}

B. export async function generateStaticParams() {
const slugs = await fetchSlugs();
return { paths: slugs };
}

C. export async function generateStaticParams() {
const slugs = await fetchSlugs();
return slugs.map(slug => ({ slug }));
}

D. export async function generateStaticParams() {
const slugs = await fetchSlugs();
return slugs.map(slug => ({ params: { slug } }));
}

Solution

1. Step 1: Understand expected return format

   generateStaticParams expects an array of objects with route params keys directly, e.g. [{ slug: 'post-1' }].

2. Step 2: Analyze each option

   export async function generateStaticParams() { const slugs = await fetchSlugs(); return slugs.map(slug => ({ slug })); } returns slugs mapped to objects with slug keys correctly. export async function generateStaticParams() { const slugs = await fetchSlugs(); return { paths: slugs }; } returns an object, not array. export async function generateStaticParams() { const slugs = await fetchSlugs(); return slugs; } returns array of strings, not objects. export async function generateStaticParams() { const slugs = await fetchSlugs(); return slugs.map(slug => ({ params: { slug } })); } adds extra params key, which is incorrect for generateStaticParams.

3. Final Answer:

   export async function generateStaticParams() { const slugs = await fetchSlugs(); return slugs.map(slug => ({ slug })); } -> Option C

4. Quick Check:

   Return array of param objects without extra nesting [OK]

Hint: Map slugs to objects with keys matching route params [OK]

Common Mistakes:

• Returning object with paths key instead of array
• Returning array of strings instead of objects
• Adding extra nesting like { params: { slug } }