Catch-all routes with [...param] in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when accessing /docs/2024/06 in a catch-all route?

Given a Next.js catch-all route file named app/docs/[...slug]/page.tsx with this code:

export default function Page({ params }) {
  return 
{JSON.stringify(params.slug)}
}

What will be rendered when visiting /docs/2024/06?

NextJS

export default function Page({ params }) {
  return <p>{JSON.stringify(params.slug)}</p>
}

A ["2024", "06"]

B "2024/06"

C undefined

D []

💡 Hint

Catch-all routes collect all path segments into an array under the param name.

In Next.js catch-all routes, the parameter is an array of all matched segments. So /docs/2024/06 sets params.slug to ["2024", "06"].

📝 Syntax

intermediate

Which file name correctly defines a catch-all route in Next.js?

You want to create a catch-all route that matches any path under /blog/. Which file name is correct?

A app/blog/[slug]/page.tsx

B app/blog/[...slug].tsx

C app/blog/[slug...]/page.tsx

D app/blog/[...slug]/page.tsx

💡 Hint

Catch-all routes use three dots inside square brackets before the param name.

The correct syntax for catch-all routes is [...param]. So the file must be named [...slug].

❓ state_output

advanced

What is the value of params.slug for /shop/electronics/phones in a catch-all route?

Consider a Next.js catch-all route app/shop/[...slug]/page.tsx with this code:

export default function Page({ params }) {
  return 
{Array.isArray(params.slug) ? params.slug.length : 'no slug'}
}

What will be rendered when visiting /shop/electronics/phones?

NextJS

export default function Page({ params }) {
  return <p>{Array.isArray(params.slug) ? params.slug.length : 'no slug'}</p>
}

A 3

B 2

C "no slug"

D 1

💡 Hint

Count how many segments are after /shop/ in the URL.

The URL /shop/electronics/phones has three segments after /shop/: 'electronics', 'phones'. So params.slug is an array of length 3.

🔧 Debug

advanced

Why does params.slug return undefined in a catch-all route?

You created app/products/[[...slug]]/page.tsx with this code:

export default function Page({ params }) {
  return 
{params.slug.join('-')}
}

But when visiting /products (no extra path), it crashes with TypeError: Cannot read properties of undefined (reading 'join'). Why?

NextJS

export default function Page({ params }) {
  return <p>{params.slug.join('-')}</p>
}

A Because the file name should be [...slug].tsx, not a folder

B Because visiting /products matches the route but params.slug is undefined when no segments exist

C Because join is not a function on arrays in Next.js

D Because params is undefined in catch-all routes

💡 Hint

Check what happens when no path segments are matched in a catch-all route.

When no segments are matched, params.slug is undefined, so calling join on it causes an error.

🧠 Conceptual

expert

How does Next.js differentiate between optional and required catch-all routes?

In Next.js routing, what is the difference between [...param] and [[...param]] in file names?

A <code>[...param]</code> matches only one segment; <code>[[...param]]</code> matches multiple segments

B <code>[...param]</code> is for dynamic routes; <code>[[...param]]</code> is for static routes

C <code>[...param]</code> requires at least one path segment; <code>[[...param]]</code> allows zero or more segments

D <code>[...param]</code> matches zero or more segments; <code>[[...param]]</code> matches exactly one segment

💡 Hint

Think about whether the route matches when no extra path is given.

The single bracket catch-all [...param] requires at least one segment. The double bracket [[...param]] makes the catch-all optional, matching zero or more segments.

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