GenerateStaticParams for static paths in NextJS - Step-by-Step Execution

Concept Flow - GenerateStaticParams for static paths

Define generateStaticParams function

↓

Fetch or define list of params

↓

Return array of params objects

↓

Next.js uses params to build static pages

↓

Static pages generated at build time

↓

Pages served fast without server calls

The generateStaticParams function provides Next.js with all the dynamic route parameters it needs to pre-build static pages at build time.

Execution Sample

NextJS

export async function generateStaticParams() {
  return [
    { slug: 'post-1' },
    { slug: 'post-2' }
  ];
}

This function returns an array of objects with slugs, telling Next.js which pages to build statically.

Execution Table

Step	Action	Data/Params	Result
1	Call generateStaticParams	No input	Function starts
2	Return array of params	[{ slug: 'post-1' }, { slug: 'post-2' }]	Next.js receives params
3	Next.js builds static pages	Uses each slug	Pages /post-1 and /post-2 generated
4	Serve pages	User requests /post-1 or /post-2	Page served instantly from static files

💡 All static paths generated; no more params to process

Variable Tracker

Variable	Start	After Return	Final
params	undefined	[{ slug: 'post-1' }, { slug: 'post-2' }]	[{ slug: 'post-1' }, { slug: 'post-2' }]

Key Moments - 2 Insights

Why do we return an array of objects from generateStaticParams?

Because Next.js needs a list of all dynamic route parameters to pre-build each page at build time, as shown in execution_table step 2.

What happens if generateStaticParams returns an empty array?

No static pages for dynamic routes are generated, so those pages won't exist unless fallback is used, as implied by the absence of params in execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what does generateStaticParams return at step 2?

A A single object {slug:'post-1'}

B An empty array []

C [{ slug: 'post-1' }, { slug: 'post-2' }]

D Undefined

💡 Hint

Check the 'Data/Params' column at step 2 in execution_table

At which step does Next.js build the static pages?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Action' column describing building pages in execution_table

If we add {slug:'post-3'} to the returned array, what changes in the execution_table?

A Step 4 serves post-3 page only

B Step 2 data includes post-3 and Step 3 builds /post-3 page

C No change, only post-1 and post-2 are built

D Function fails to return

💡 Hint

Adding params affects the returned array and pages built as shown in steps 2 and 3

Concept Snapshot

generateStaticParams is an async function
Returns array of params objects for dynamic routes
Next.js uses these params to pre-build static pages
Pages are generated at build time for fast loading
No server needed to serve these pages
Useful for static site generation with dynamic paths

Full Transcript

The generateStaticParams function in Next.js is used to tell the framework which dynamic routes to pre-build as static pages. When called, it returns an array of objects, each representing parameters for a dynamic route, like slugs for blog posts. Next.js uses this list during the build process to generate static HTML pages for each route. This means when users visit these pages, they load instantly without server delays. If the array is empty, no static pages are generated for those routes. Adding more params adds more static pages. This process improves performance and SEO by serving pre-built pages.