Catch-all routes with [...param] in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a catch-all route in Next.js?

A catch-all route in Next.js is a special file-based route that matches any number of URL segments. It uses the syntax [...param] in the filename to capture all parts of the path into an array.

beginner

How do you define a catch-all route file in Next.js?

You create a file inside the pages or app directory with the name [...param].js or [...param]/page.js. The square brackets with three dots tell Next.js to capture all matching URL parts into an array called 'param'.

intermediate

How does Next.js pass the catch-all route parameters to the component?

Next.js passes the catch-all parameters as an array inside the params object. For example, if the route is [...slug], then params.slug will be an array of all URL segments matched.

intermediate

What is the difference between a catch-all route [...param] and an optional catch-all route [[...param]]?

A catch-all route [...param] requires at least one URL segment to match. An optional catch-all route [[...param]] can match zero or more segments, so it also matches the base path without extra segments.

beginner

Why use catch-all routes in Next.js?

Catch-all routes let you handle dynamic nested paths easily, like blog posts with multiple categories or user-generated URLs. They simplify routing by capturing many paths with one file.

In Next.js, what does the file name [...slug].js represent?

A An optional route that matches zero or one segment

B A static page with the name 'slug'

C A route that matches exactly one URL segment named 'slug'

D A catch-all route that captures multiple URL segments into an array

The syntax [...slug] defines a catch-all route capturing all matching URL parts into an array called slug.

What type of data does Next.js provide for catch-all route parameters?

A An array of strings representing each URL segment

B A boolean indicating if the route matched

C A string representing the full path

D An object with keys for each segment

Next.js passes catch-all parameters as an array of strings, each string is a segment of the URL.

Which file name allows matching zero or more URL segments in Next.js routing?

A [param].js

B [[...param]].js

C [...param].js

D param.js

The double square brackets [[...param]] define an optional catch-all route that matches zero or more segments.

If you want to capture a URL like /blog/2024/june/post-title with one route file, which Next.js route file would you use?

A blog/[...slug].js

B blog/[post].js

C blog/[[...slug]].js

D blog/index.js

The catch-all route [...slug] captures multiple nested segments like 2024/june/post-title into an array.

What happens if you visit the base path of a catch-all route defined as [...param].js without extra segments?

A The route matches and param is an empty array

B The route matches and param is undefined

C The route does not match and returns 404

D The route matches and param is a string

A catch-all route [...param] requires at least one segment; visiting the base path without segments does not match.

Explain how catch-all routes work in Next.js and how you access the captured parameters.

Think about how Next.js uses file names to match URLs and how it sends data to components.

Describe a real-life example where catch-all routes in Next.js would be useful and why.

Imagine a website with many levels of content categories or user pages.