GenerateStaticParams for static paths in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of generateStaticParams in Next.js?

generateStaticParams is used to tell Next.js which dynamic routes to pre-render at build time. It returns a list of parameters for static paths.

beginner

What should generateStaticParams return?

It should return an array of objects, where each object contains the parameters needed for a dynamic route.

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

intermediate

When is generateStaticParams called in the Next.js lifecycle?

It runs at build time during static site generation to prepare all the paths that need to be pre-rendered.

intermediate

How does generateStaticParams improve performance?

By pre-rendering pages for all specified paths, it avoids server work on each request, making page loads faster and more reliable.

intermediate

Can generateStaticParams fetch data from an API?

Yes, it can fetch data during build time to generate the list of paths dynamically.

What does generateStaticParams return in Next.js?

A An array of parameter objects for dynamic routes

B A React component

C A string URL

D A boolean value

generateStaticParams returns an array of objects, each representing parameters for a dynamic route to pre-render.

When is generateStaticParams executed?

A After the page loads

B On every client request

C Only in development mode

D At build time

It runs at build time to generate static paths for pre-rendering.

Which Next.js feature works closely with generateStaticParams?

A Client-side rendering

B Static Site Generation (SSG)

C API routes

D Server-side rendering (SSR)

generateStaticParams is part of Static Site Generation to pre-build pages.

Can generateStaticParams be async to fetch data?

A No, it must be synchronous

B Only if using server components

C Yes, it can be async

D Only in development mode

It can be async to fetch data needed for generating paths.

What happens if a path is not returned by generateStaticParams?

A That path will not be pre-rendered and may show a 404 error

B Next.js will automatically generate it

C The page will load client-side only

D The server will render it on demand

Only paths returned by generateStaticParams are pre-rendered; others may 404.

Explain how generateStaticParams helps Next.js build static pages for dynamic routes.

Think about how Next.js knows which pages to build before users visit them.

Describe a simple example of using generateStaticParams to generate static paths for a blog with dynamic post IDs.

Imagine you have blog posts with IDs and want Next.js to build pages for each.

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 } }