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.