Catch-all routes with [...param] in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a catch-all route file in Next.js.

NextJS

export default function Page({ params }) {
  return <div>Params: {params.slug[1]</div>;
}

export async function generateStaticParams() {
  return [{ slug: ['example'] }];
}

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

A.toString()

B.map()

C.length

D.join('/')

Attempts:

3 left

💡 Hint

Common Mistakes

Using .toString() which separates elements by commas instead of slashes.

Trying to access params as a string directly.

In catch-all routes, the params.slug is an array. Using .join('/') converts it to a path string.

2fill in blank

medium

Complete the code to define a catch-all route folder name in Next.js.

NextJS

Create a folder named [1] inside the app directory to catch all routes under /docs.

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

A[...slug]

B[...docs]

Cdocs

D[docs]

Attempts:

3 left

💡 Hint

Common Mistakes

Using single brackets without dots like [docs].

Naming the folder without brackets.

To catch all routes under /docs, the folder name must be [...docs] using square brackets and three dots.

3fill in blank

hard

Fix the error in the catch-all route component to access the params correctly.

NextJS

export default function Page({ params }) {
  const slug = params.[1];
  return <div>Slug length: {slug.length}</div>;
}

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

Aslug

Bpath

CcatchAll

Dparam

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong param key that does not exist in params.

Trying to access params directly without the param key.

The catch-all param name is usually slug or the name used in the folder. Access it as params.slug.

4fill in blank

hard

Fill both blanks to create a catch-all route that renders the joined path segments and generates static params.

NextJS

export default function Page({ params }) {
  return <h1>Path: {params.[1].[2]('/')}</h1>;
}

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

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

Aslug

Bjoin

Cmap

Dsplit

Attempts:

3 left

💡 Hint

Common Mistakes

Using .split('/') which is for strings, not arrays.

Using .map() without joining.

The catch-all param is slug. To display the path, join the array with '/'.

5fill in blank

hard

Fill all three blanks to create a catch-all route that renders the path, uses a dynamic segment, and generates static params.

NextJS

export default function Page({ params }) {
  return <div>Full path: {params.[1].[2]('/')}</div>;
}

export async function generateStaticParams() {
  return [
    { [3]: ['2024', '06', '15'] }
  ];
}

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

Aslug

Bjoin

Cdate

Dpath

Attempts:

3 left

💡 Hint

Common Mistakes

Using different param keys in component and static params.

Using .split instead of .join.

The catch-all param is slug. Join the array with '/'. The static params key must match the param name slug.