Catch-all routes with [...param] in NextJS - Step-by-Step Execution

Concept Flow - Catch-all routes with [...param]

User visits URL

↓

Next.js checks pages folder

↓

Match exact route?

No→Check catch-all route [...param

↓

Extract all path segments

↓

Render matched page

↓

Show page with params

Next.js tries to find an exact page match. If none, it uses the catch-all route [...param] to capture all remaining path parts and render the page.

Execution Sample

NextJS

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

// File: app/[...slug]/page.js

This page captures all URL parts after the base and shows them joined by slashes.

Execution Table

Step	URL Visited	Route Matched	Params Extracted	Rendered Output
1	/about	No exact /about page	slug = ['about']	Path: about
2	/blog/2024/june	No exact /blog/2024/june page	slug = ['blog','2024','june']	Path: blog/2024/june
3	/contact/us	No exact /contact/us page	slug = ['contact','us']	Path: contact/us
4	/	No exact / page	slug = []	Path:

💡 No exact page found, catch-all route [...slug] used to capture all path segments.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4
slug	undefined	['about']	['blog','2024','june']	['contact','us']	[]

Key Moments - 3 Insights

Why does the catch-all route receive an array for params.slug?

Because [...slug] captures all parts of the URL path as an array, shown in execution_table rows where slug holds multiple segments.

What happens if the URL is just '/' with no extra path?

The slug array is empty, as shown in execution_table step 4, because no path segments exist after the base.

Why does Next.js use the catch-all route when no exact page matches?

Next.js falls back to [...param] routes to handle any unmatched paths, capturing them all as params, as shown in the concept_flow and execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is params.slug when visiting '/blog/2024/june'?

A ['blog']

B ['2024','june']

C ['blog','2024','june']

D []

💡 Hint

Check execution_table row 2 under Params Extracted.

At which step does params.slug become an empty array?

A Step 1

B Step 4

C Step 2

D Step 3

💡 Hint

Look at execution_table row 4 Params Extracted column.

If a page file named 'about/page.js' is added, what changes in the execution_table for URL '/about'?

A Route Matched becomes exact /about page, params.slug is undefined

B params.slug remains ['about']

C Rendered Output shows Path: about/us

D No change in execution_table

💡 Hint

Adding exact page stops catch-all from matching, see concept_flow for exact vs catch-all routing.

Concept Snapshot

Catch-all routes use [...param] in Next.js to capture all URL parts as an array.
If no exact page matches, Next.js uses this route.
Params come as an array of path segments.
Useful for dynamic nested paths.
Render by joining params array.
Empty array if no extra path.

Full Transcript

In Next.js, catch-all routes use the [...param] syntax to capture all parts of a URL path that don't match an exact page. When a user visits a URL, Next.js first looks for an exact page match. If none is found, it uses the catch-all route to capture all remaining path segments as an array in params. For example, visiting '/blog/2024/june' sets params.slug to ['blog','2024','june']. If the URL is just '/', the array is empty. This allows rendering dynamic nested paths easily by joining the array. Adding an exact page like 'about/page.js' stops the catch-all from matching '/about'. This flow helps handle flexible URLs in Next.js apps.

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