Catch-all routes with [...param] in NextJS

Introduction

Catch-all routes let you handle many URL paths with one page. It helps when you want to show different content based on parts of the URL.

You want one page to handle multiple nested URLs, like blog posts or product categories.

You need to capture unknown or dynamic URL parts to show custom content.

You want to build a file explorer or documentation site with many levels of folders.

You want to create a flexible URL structure without making many separate pages.

Syntax

NextJS

pages/[...param].js

// or in app router
app/[...param]/page.js

The [...param] syntax creates a catch-all route that matches any path under that folder.

The parameter param will be an array of strings representing each part of the URL.

Examples

This page shows the array of URL parts captured by [...param].

NextJS

export default function Page({ params }) {
  return <div>{JSON.stringify(params.param)}</div>;
}

When visiting /docs/nextjs/routing, the param array contains each path segment after /docs.

NextJS

URL: /docs/nextjs/routing
params.param = ['nextjs', 'routing']

This example joins the parts with slashes to show a readable path.

NextJS

export default function Page({ params }) {
  const path = params.param?.join(' / ') ?? 'home';
  return <h1>Path: {path}</h1>;
}

Sample Program

This Next.js page uses a catch-all route to show each part of the URL as a list. If no extra path is given, it shows 'Home'.

NextJS

import React from 'react';

export default function CatchAllPage({ params }) {
  // params.param is an array of URL parts
  const parts = params.param ?? [];
  return (
    <main>
      <h1>Catch-All Route</h1>
      <p>You visited these parts of the URL:</p>
      <ul>
        {parts.length > 0 ? (
          parts.map((part, i) => <li key={i}>{part}</li>)
        ) : (
          <li>Home (no extra path)</li>
        )}
      </ul>
    </main>
  );
}

Important Notes

If you want to match zero or more segments, use [[...param]]. For one or more segments only, use [...param].

The params object is passed automatically to your page component in Next.js App Router.

Use this feature to keep your app structure simple and flexible for many URL patterns.

Summary

Catch-all routes use [...param] to match many URL paths with one page.

The captured parameter is an array of URL parts you can use to show dynamic content.

This helps build flexible and scalable routing 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