Catch-all routes with [...param] in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a catch-all route in Next.js?

A catch-all route in Next.js is a special file-based route that matches any number of URL segments. It uses the syntax [...param] in the filename to capture all parts of the path into an array.

beginner

How do you define a catch-all route file in Next.js?

You create a file inside the pages or app directory with the name [...param].js or [...param]/page.js. The square brackets with three dots tell Next.js to capture all matching URL parts into an array called 'param'.

intermediate

How does Next.js pass the catch-all route parameters to the component?

Next.js passes the catch-all parameters as an array inside the params object. For example, if the route is [...slug], then params.slug will be an array of all URL segments matched.

intermediate

What is the difference between a catch-all route [...param] and an optional catch-all route [[...param]]?

A catch-all route [...param] requires at least one URL segment to match. An optional catch-all route [[...param]] can match zero or more segments, so it also matches the base path without extra segments.

beginner

Why use catch-all routes in Next.js?

Catch-all routes let you handle dynamic nested paths easily, like blog posts with multiple categories or user-generated URLs. They simplify routing by capturing many paths with one file.

In Next.js, what does the file name [...slug].js represent?

A An optional route that matches zero or one segment

B A static page with the name 'slug'

C A route that matches exactly one URL segment named 'slug'

D A catch-all route that captures multiple URL segments into an array

The syntax [...slug] defines a catch-all route capturing all matching URL parts into an array called slug.

What type of data does Next.js provide for catch-all route parameters?

A An array of strings representing each URL segment

B A boolean indicating if the route matched

C A string representing the full path

D An object with keys for each segment

Next.js passes catch-all parameters as an array of strings, each string is a segment of the URL.

Which file name allows matching zero or more URL segments in Next.js routing?

A [param].js

B [[...param]].js

C [...param].js

D param.js

The double square brackets [[...param]] define an optional catch-all route that matches zero or more segments.

If you want to capture a URL like /blog/2024/june/post-title with one route file, which Next.js route file would you use?

A blog/[...slug].js

B blog/[post].js

C blog/[[...slug]].js

D blog/index.js

The catch-all route [...slug] captures multiple nested segments like 2024/june/post-title into an array.

What happens if you visit the base path of a catch-all route defined as [...param].js without extra segments?

A The route matches and param is an empty array

B The route matches and param is undefined

C The route does not match and returns 404

D The route matches and param is a string

A catch-all route [...param] requires at least one segment; visiting the base path without segments does not match.

Explain how catch-all routes work in Next.js and how you access the captured parameters.

Think about how Next.js uses file names to match URLs and how it sends data to components.

Describe a real-life example where catch-all routes in Next.js would be useful and why.

Imagine a website with many levels of content categories or user pages.

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