GenerateStaticParams for static paths in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a function that generates static params for dynamic routes.

NextJS

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

Drag options to blanks, or click blank then click option'

AgetStaticPaths

BgetStaticProps

CfetchStaticParams

DgenerateStaticParams

Attempts:

3 left

💡 Hint

Common Mistakes

Using getStaticPaths which is for the Pages Router.

Using getStaticProps which is for data fetching, not params generation.

The correct function to generate static params for Next.js dynamic routes in the App Router is generateStaticParams.

2fill in blank

medium

Complete the code to return static params with a dynamic segment named 'slug'.

NextJS

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

Drag options to blanks, or click blank then click option'

Aparams

Bid

Cslug

Dpath

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' or 'params' instead of the dynamic segment name.

Using 'path' which is not a valid param key.

The dynamic segment in the route is named 'slug', so the object keys must be 'slug'.

3fill in blank

hard

Fix the error in the generateStaticParams function to correctly return params for a dynamic route with 'category'.

NextJS

export async function generateStaticParams() {
  return [
    { [1]: 'tech' },
    { category: 'life' }
  ];
}

Drag options to blanks, or click blank then click option'

Acategory

Bparams

Cid

Dslug

Attempts:

3 left

💡 Hint

Common Mistakes

Returning objects nested inside 'params' which is for Pages Router.

Using wrong keys like 'slug' or 'id' instead of 'category'.

In Next.js App Router, generateStaticParams returns an array of objects with keys matching the dynamic segment name directly, not nested inside 'params'.

4fill in blank

hard

Fill both blanks to generate static params for a dynamic route with segments 'year' and 'month'.

NextJS

export async function generateStaticParams() {
  return [
    { [1]: '2023', [2]: '06' },
    { year: '2024', month: '01' }
  ];
}

Drag options to blanks, or click blank then click option'

Ayear

Bmonth

Cdate

Dday

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect keys like 'date' or 'day'.

Nesting params inside another object.

The keys must match the dynamic route segments 'year' and 'month' exactly.

5fill in blank

hard

Fill all three blanks to generate static params for a dynamic route with segments 'category', 'id', and 'slug'.

NextJS

export async function generateStaticParams() {
  return [
    { [1]: 'news', [2]: '123', [3]: 'breaking-story' },
    { category: 'blog', id: '456', slug: 'hello-world' }
  ];
}

Drag options to blanks, or click blank then click option'

Acategory

Bid

Cslug

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys that do not match the route segments.

Nesting params inside another object.

Each key must match the dynamic segment names exactly: 'category', 'id', and 'slug'.