Multiple URL parameters in NextJs with catch-all segments: the […name] and [[…name]] folders

DanielDecember 19, 2022December 28, 2022

Learn how to use multiple URL parameters/segments in NextJs paths, with the catch-all segments; the [...name] and [[...name]] folders naming patterns.

There are a few reserved filenames and conventions that the NextJs app folder has.

For example, if we want to have dynamic URL parameters (or dynamic segments) we can use the square bracket notation. So, the below folder structure:

/app
    /blog
        /[url]
            page.js

Will give us access to URLs such as:

/blog/one
/blog/two
/blog/three

But, what if we want to have a variable number of URL parameters? Something as:

/blog/one
/blog/one/two
/blog/one/two/three ....

For cases like this, we will use catch-all segments.

Catch-all Segments folders in NextJs; the [...name] folders

In order to declare a NextJs catch-all segments folder we will need to wrap the folder name in square brackets and prefix it with the spread operator:

[...folderNameHere]

Therefore if we change the above folder structure to:

/app
    /blog
        /[...url]
            page.js

We will be able to use any number of URL parameters:

/* all of these urls will be mapped to:
/app/blog/[...url]/page.js */
/blog/one
/blog/one/two
/blog/any/numberOf/params/here

If we want to display these parameters we can use the object destructuring and retrieve them from the params object received by our blog page:

export default function Page({params}) {
    const {url = []} = params
    return <>
        <h1>Received URL params: </h1>
        <ul>
            {url.map( (p, i) => <li key={i}>{p}</li>)}
        </ul>
    </>
}

Optional Catch-all Dynamic Segments folders in NextJs; the [[...name]] folders

With the basic catch-all segments folders, we will only intercept URLs as:

/blog/one
/blog/one/two
/blog/one/two/three

However, if we access the root /blog path we will get the 404 page:

If we want to intercept also the root path we will need to add double square brackets to the folder name:

/app
    /blog
        /[[...url]]
            page.js

Now our page.js file will intercept all the following URL formats:

/* all of these urls will be mapped to:
/app/blog/[[...url]]/page.js */
/blog
/blog/one
/blog/one/two
/blog/any/numberOf/params/here