Catch-all API routes in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

A catch-all API route is a special route that matches all paths under a specific folder, capturing multiple URL segments as an array. It lets you handle dynamic and nested API paths with one file.

beginner

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

You create a file named [...param].js (or .ts) inside the /app/api or /pages/api folder. The square brackets with three dots tell Next.js to capture all matching path segments into an array called 'param'.

intermediate

What is the difference between a catch-all route and an optional catch-all route?

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

beginner

How do you access the captured path segments inside a catch-all API route handler?

Inside the API route handler, you get the segments from the request's params object, for example, params.param, which is an array of strings representing each path segment matched by the catch-all route.

intermediate

Why use catch-all API routes instead of many separate API files?

Catch-all routes let you handle many related API paths with one file, reducing code duplication and making it easier to manage nested or dynamic routes in a clean way.

Which file name defines a catch-all API route in Next.js?

A [slug].js

B [[...slug]].js

C slug.js

D [...slug].js

A catch-all route uses three dots inside square brackets like [...slug].js to capture multiple path segments.

What type of value does the catch-all route parameter provide inside the API handler?

A A string

B An array of strings

C A number

D An object

The catch-all parameter is an array of strings, each string is a path segment matched by the route.

What does an optional catch-all route ([[...param]].js) allow that a normal catch-all ([...param].js) does not?

A Matching only numeric segments

B Matching only one path segment

C Matching zero or more path segments

D Matching only the root path

Optional catch-all routes match zero or more segments, so they also match the base path without extra segments.

Where do you place catch-all API route files in a Next.js project using the App Router?

A /app/api/

B /pages/api/

C /public/api/

D /components/api/

With the App Router, API routes go inside the /app/api folder.

Why might you choose a catch-all API route over multiple specific routes?

A To handle many nested paths with one file

B To improve CSS styling

C To avoid using React components

D To disable API routes

Catch-all routes simplify handling many nested or dynamic paths in one place.

Explain how to create and use a catch-all API route in Next.js and how the parameters are accessed.

Think about the special file naming and how Next.js passes URL parts to your code.

Describe the difference between a catch-all and an optional catch-all API route in Next.js.

Focus on how many path segments each route type matches.