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.