Catch-all API routes in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this catch-all API route?

Consider a Next.js API route file named pages/api/[...slug].js with the following code. What will be the JSON response when a GET request is made to /api/a/b/c?

NextJS

export default function handler(req, res) {
  const { slug } = req.query;
  res.status(200).json({ path: slug });
}

A {"path": ["a", "b", "c"]}

B {"path": "a/b/c"}

C {"path": null}

D {"path": []}

💡 Hint

Remember that catch-all routes capture all parts of the URL as an array in the query.

In Next.js, catch-all API routes like [...slug].js capture the URL parts after /api/ as an array in req.query.slug. So /api/a/b/c sets slug to ["a", "b", "c"].

📝 Syntax

intermediate

Which catch-all API route filename is valid in Next.js?

Which of the following filenames correctly defines a catch-all API route in Next.js?

A [...slug].jsx

B [slug...].js

C [...slug].js

D [slug].js

💡 Hint

Catch-all routes use three dots inside square brackets before the name.

The correct syntax for catch-all routes is [...name].js. Option C matches this. Option C has dots after the name which is invalid. Option C is a single dynamic route, not catch-all. Option C uses .jsx which is not valid for API routes.

🔧 Debug

advanced

Why does this catch-all API route return 404 for /api?

Given a catch-all API route file pages/api/[...params].js with this code:

export default function handler(req, res) {
  const { params } = req.query;
  res.status(200).json({ params });
}

Why does a GET request to /api return 404 Not Found?

A Because the handler function is missing a return statement.

B Because catch-all routes do not match the base path without any segments.

C Because req.query.params is undefined and causes an error.

D Because Next.js requires a separate file for the base /api route.

💡 Hint

Think about how catch-all routes match URLs with zero or more segments.

Catch-all routes like [...params].js match URLs with one or more segments after /api/. The base /api path has zero segments, so it does not match this route and returns 404.

❓ state_output

advanced

What is the value of req.query.slug for /api/foo?

In a Next.js API route file named pages/api/[...slug].js, what is the value of req.query.slug when a GET request is made to /api/foo?

NextJS

export default function handler(req, res) {
  res.status(200).json({ slug: req.query.slug });
}

A []

B "foo"

C undefined

D ["foo"]

💡 Hint

Catch-all routes always return an array for the matched segments.

For catch-all routes, even a single segment like /api/foo is captured as an array with one element: ["foo"].

🧠 Conceptual

expert

How to handle both /api and /api/* with catch-all routes?

You want to create a Next.js API that handles requests to /api and all sub-paths like /api/a/b using catch-all routes. Which setup correctly handles both cases?

A Create <code>pages/api/[[...slug]].js</code> which matches /api and all sub-paths.

B Create only <code>pages/api/[...slug].js</code> and check if slug is undefined for /api.

C Create <code>pages/api/index.js</code> for /api and <code>pages/api/[...slug].js</code> for all sub-paths.

D Create <code>pages/api/[slug].js</code> and <code>pages/api/[...slug].js</code> to cover all cases.

💡 Hint

Next.js supports optional catch-all routes with double brackets.

The optional catch-all route [[...slug]].js matches /api (with slug undefined) and any sub-paths like /api/a/b (slug is array). This single file handles both cases.

Practice

1. What does a catch-all API route file named [...slug].js in Next.js do?

easy

A. It catches all URL paths that match and provides the parts as an array in req.query.slug.

B. It only catches the root API path and ignores nested paths.

C. It catches only one specific URL path exactly matching slug.

D. It disables all API routes in the folder.

Solution

1. Step 1: Understand catch-all route naming

   In Next.js, files named with [...name].js catch all nested paths under that route.

2. Step 2: Check how parameters are passed

   The parts of the URL matched are passed as an array in req.query.name, here slug.

3. Final Answer:

   It catches all URL paths that match and provides the parts as an array in req.query.slug. -> Option A

4. Quick Check:

   Catch-all route = array in req.query [OK]

Hint: Catch-all uses [...name].js and returns array in req.query[name] [OK]

Common Mistakes:

• Thinking it catches only one path instead of many
• Expecting a string instead of an array in req.query
• Confusing catch-all with optional catch-all routes

2. Which of the following is the correct filename for a catch-all API route in Next.js?

easy

A. [slug].js

B. [...slug].js

C. slug.js

D. [slug...].js

Solution

1. Step 1: Recall catch-all route syntax

   Catch-all routes use three dots inside square brackets before the name, like [...slug].js.

2. Step 2: Compare options

   Only [...slug].js matches the correct syntax for catch-all routes.

3. Final Answer:

   [...slug].js -> Option B

4. Quick Check:

   Catch-all filename = [...name].js [OK]

Hint: Catch-all filenames always have three dots inside brackets [OK]

Common Mistakes:

• Using single brackets without dots for catch-all
• Placing dots outside brackets
• Missing brackets entirely

3. Given a catch-all API route file pages/api/[...params].js with this handler:

export default function handler(req, res) {
  res.json(req.query.params);
}

What will be the JSON response for a request to /api/a/b/c?

medium

A. "a/b/c"

B. {"params": "a/b/c"}

C. ["a", "b", "c"]

D. null

Solution

1. Step 1: Understand catch-all parameter passing

   The catch-all [...params] captures all path parts as an array in req.query.params.

2. Step 2: Check the handler response

   The handler returns req.query.params as JSON, so the response is the array of parts.

3. Final Answer:

   ["a", "b", "c"] -> Option C

4. Quick Check:

   Catch-all returns array of path parts [OK]

Hint: Catch-all returns array of URL parts in req.query [OK]

Common Mistakes:

• Expecting a string instead of an array
• Confusing JSON structure returned
• Not recognizing catch-all returns array

4. You wrote a catch-all API route pages/api/[...slug].js but when you request /api (no extra path), you get an error. What is the likely cause?

medium

A. You forgot to export the handler function.

B. The file name is incorrect; it should be [slug].js.

C. API routes cannot have dynamic segments.

D. Catch-all routes require at least one path segment; use optional catch-all [[...slug]].js instead.

Solution

1. Step 1: Understand catch-all vs optional catch-all

   Catch-all [...slug].js requires at least one path part; it does not match the base path alone.

2. Step 2: Identify fix for base path requests

   To handle base path /api with no extra parts, use optional catch-all [[...slug]].js.

3. Final Answer:

   Catch-all routes require at least one path segment; use optional catch-all [[...slug]].js instead. -> Option D

4. Quick Check:

   Catch-all needs path parts; optional catch-all handles empty [OK]

Hint: Use [[...name]].js for optional catch-all including empty path [OK]

Common Mistakes:

• Expecting catch-all to match empty path
• Misnaming the file without brackets
• Ignoring export of handler function

5. You want to create a catch-all API route that returns a JSON object with keys for each path part and their index, for example, for /api/a/b/c it returns {"0": "a", "1": "b", "2": "c"}. Which handler code inside pages/api/[...parts].js achieves this?

hard

A. export default function handler(req, res) {
const obj = {};
req.query.parts.forEach((p, i) => { obj[i] = p; });
res.json(obj);
}

B. export default function handler(req, res) {
res.json(req.query.parts.join(','));
}

C. export default function handler(req, res) {
res.json({ parts: req.query.parts });
}

D. export default function handler(req, res) {
res.json(req.query.parts.length);
}

Solution

1. Step 1: Understand the input and desired output

   The catch-all parameter parts is an array of path parts. We want to create an object with keys as indices and values as parts.

2. Step 2: Check which code builds the object correctly

   export default function handler(req, res) { const obj = {}; req.query.parts.forEach((p, i) => { obj[i] = p; }); res.json(obj); } loops over req.query.parts and assigns each part to the object with its index as key, then returns it as JSON.

3. Final Answer:

   export default function handler(req, res) { const obj = {}; req.query.parts.forEach((p, i) => { obj[i] = p; }); res.json(obj); } -> Option A

4. Quick Check:

   Loop parts to object with index keys = export default function handler(req, res) { const obj = {}; req.query.parts.forEach((p, i) => { obj[i] = p; }); res.json(obj); } [OK]

Hint: Use forEach to map array parts to object keys [OK]

Common Mistakes:

• Returning array or string instead of object
• Not looping to create object keys
• Returning length instead of parts