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.

Practice

1. What does a catch-all route with [...param] do in Next.js?

easy

A. It matches any URL path that starts with the route prefix and captures the rest as an array.

B. It matches only a single fixed URL path exactly.

C. It matches URL paths but captures parameters as a string, not an array.

D. It disables dynamic routing for the page.

Solution

1. Step 1: Understand catch-all route behavior

   A catch-all route like [...param] matches any URL path that starts with the route prefix and captures all remaining parts.

2. Step 2: Recognize parameter type

   The captured parameter is an array of strings representing each part of the URL after the prefix.

3. Final Answer:

   It matches any URL path that starts with the route prefix and captures the rest as an array. -> Option A

4. Quick Check:

   Catch-all routes capture URL parts as arrays [OK]

Hint: Catch-all routes capture multiple URL parts as an array [OK]

Common Mistakes:

• Thinking catch-all captures a single string instead of an array
• Believing catch-all matches only exact paths
• Confusing catch-all with optional catch-all routes

2. Which of the following is the correct filename for a catch-all route in Next.js to capture all paths under /blog?

easy

A. blog/param.js

B. blog/[param].js

C. blog/[...param].js

D. blog/[[...param]].js

Solution

1. Step 1: Recall catch-all route syntax

   Catch-all routes use square brackets with three dots: [...param] to capture multiple segments.

2. Step 2: Match filename to route

   To capture all paths under /blog, the file must be named blog/[...param].js.

3. Final Answer:

   blog/[...param].js -> Option C

4. Quick Check:

   Catch-all filename uses [...param] syntax [OK]

Hint: Catch-all filenames always use three dots inside brackets [OK]

Common Mistakes:

• Using single brackets without dots for catch-all
• Confusing optional catch-all [[...param]] with catch-all
• Omitting brackets or dots in filename

3. Given a catch-all route file pages/shop/[...items].js and the URL /shop/electronics/phones/smartphones, what will be the value of items inside getServerSideProps?

medium

A. 'electronics/phones/smartphones'

B. ['phones', 'smartphones']

C. ['shop', 'electronics', 'phones', 'smartphones']

D. ['electronics', 'phones', 'smartphones']

Solution

1. Step 1: Identify catch-all parameter capture

   The catch-all route [...items] captures all URL parts after /shop as an array.

2. Step 2: Extract URL parts after /shop

   From the URL /shop/electronics/phones/smartphones, the parts after /shop are electronics, phones, and smartphones.

3. Final Answer:

   ['electronics', 'phones', 'smartphones'] -> Option D

4. Quick Check:

   Catch-all params = array of URL parts after prefix [OK]

Hint: Catch-all params are arrays of URL parts after the route prefix [OK]

Common Mistakes:

• Including the route prefix in the array
• Expecting a string instead of an array
• Missing some URL parts in the array

4. Consider this catch-all route file: pages/docs/[...slug].js. The developer tries to access slug.join('-') but gets an error. What is the likely cause?

medium

A. The slug parameter is undefined because the URL is /docs with no extra parts.

B. The slug parameter is a string, not an array, so join is invalid.

C. The file name should be [slug].js instead of catch-all.

D. The catch-all route does not support arrays.

Solution

1. Step 1: Understand catch-all behavior with no extra path

   If the URL is exactly /docs with no extra parts, the catch-all slug parameter is undefined.

2. Step 2: Reason about calling join on undefined

   Calling join on undefined causes an error because join is an array method.

3. Final Answer:

   The slug parameter is undefined because the URL is /docs with no extra parts. -> Option A

4. Quick Check:

   Catch-all param undefined if no extra URL parts [OK]

Hint: Catch-all param is undefined if URL has no extra segments [OK]

Common Mistakes:

• Assuming catch-all param is always an array
• Confusing catch-all with optional catch-all routes
• Not checking for undefined before using array methods

5. You want to create a catch-all route in Next.js that matches /profile and any deeper paths like /profile/settings/privacy. Which filename should you use to make the parameter optional and avoid errors when no extra path is given?

hard

A. profile/[...params].js

B. profile/[[...params]].js

C. profile/[params].js

D. profile/params.js

Solution

1. Step 1: Understand optional catch-all syntax

   To match both /profile and deeper paths, use optional catch-all syntax with double brackets: [[...params]].

2. Step 2: Recognize difference from regular catch-all

   Regular catch-all [...params] requires at least one path segment; optional catch-all [[...params]] allows zero or more segments.

3. Final Answer:

   profile/[[...params]].js -> Option B

4. Quick Check:

   Optional catch-all uses double brackets [[...param]] [OK]

Hint: Use [[...param]] for optional catch-all routes [OK]

Common Mistakes:

• Using single brackets for optional catch-all
• Expecting regular catch-all to match empty paths
• Naming files without brackets