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.