Catch-all routes with [...param] in NextJS - Mini Project: Build & Apply

Catch-all Routes with [...param] in Next.js

📖 Scenario: You are building a simple Next.js website that shows different pages based on the URL path. You want to catch all paths under a certain folder and display them dynamically.

🎯 Goal: Create a catch-all route using [...param] in Next.js that captures all URL segments after a base path and displays them as a list on the page.

📋 What You'll Learn

Create a Next.js page file with a catch-all route named [...param] inside the app/docs/ folder

Extract the catch-all route parameter named param using Next.js server component props

Render the param segments as an unordered list (<ul>) on the page

Handle the case when no segments are provided by showing a message No path segments provided

💡 Why This Matters

🌍 Real World

Catch-all routes are useful for building documentation sites, blogs, or any app where the URL path can have many nested levels and you want to handle them dynamically.

💼 Career

Understanding catch-all routes in Next.js is important for frontend developers working on dynamic websites and apps that require flexible routing and content rendering.

1

Create the catch-all route file

Create a new file named app/docs/[...param]/page.tsx with a default export of a React functional component named DocsPage.

NextJS

// Create the file app/docs/[...param]/page.tsx
// Export a React component named DocsPage

export default function DocsPage() {
  // Your code here
}

Hint

This step sets up the file that will catch all routes under /docs/.

2

Add the catch-all route parameter

Modify the DocsPage component to accept a params prop with a property param typed as string[] | undefined. Use destructuring in the function parameter to get param from params.

NextJS

export default function DocsPage({ params }: { params: { param?: string[] } }) {
  // Your code here
}

Hint

Next.js passes route parameters inside the params prop. The catch-all parameter param is an array of strings or undefined.

3

Render the path segments as a list

Inside the DocsPage component, check if param exists. If it does, render an unordered list (<ul>) with each segment as a list item (<li>). Use param.map with segment and index as parameters. If param is undefined, render a paragraph (<p>) with the text No path segments provided.

NextJS

export default function DocsPage({ params }: { params: { param?: string[] } }) {
  const { param } = params;
  // Your code here
}

Hint

Use conditional rendering to show either the list of segments or a message if none are provided.

4

Add a heading and export the complete page

Add a heading (<h1>) with the text Docs Path above the list or message. Ensure the component is the default export and the file is named page.tsx inside app/docs/[...param]/.

NextJS

export default function DocsPage({ params }: { params: { param?: string[] } }) {
  const { param } = params;
  // Your code here
}

Hint

Use React fragments (<></>) to wrap multiple elements returned from the component.

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