Dynamic API routes in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this dynamic API route?

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

NextJS

export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ userId: id, message: `User ID is ${id}` });
}

A {"id":"42","message":"User ID is 42"}

B {"userId":42,"message":"User ID is 42"}

C {"userId":"42","message":"User ID is 42"}

D {"userId":"id","message":"User ID is id"}

💡 Hint

Remember that query parameters in Next.js API routes are always strings.

The dynamic segment [id] is accessed via req.query.id as a string. The response JSON uses this string value for both userId and message.

📝 Syntax

intermediate

Which option correctly defines a catch-all dynamic API route?

You want to create a Next.js API route that catches all paths under /api/posts/, including nested paths like /api/posts/2023/05. Which file name correctly implements this?

A pages/api/posts/[...slug].jsx

B pages/api/posts/[slug].js

C pages/api/posts/[slug...].js

D pages/api/posts/[...slug].js

💡 Hint

Catch-all routes use three dots inside square brackets.

The correct syntax for catch-all dynamic routes in Next.js is [...param]. The file extension must be .js or .ts for API routes.

🔧 Debug

advanced

Why does this dynamic API route return 404 for /api/products/123?

Given the file pages/api/product/[productId].js with this code, why does a request to /api/products/123 return 404?

export default function handler(req, res) {
  const { productId } = req.query;
  if (!productId) {
    res.status(400).json({ error: 'Missing productId' });
    return;
  }
  res.status(200).json({ id: productId });
}

A The handler does not handle POST requests, so GET returns 404.

B The file is inside pages/api/product/ but the folder is named 'product' instead of 'products'.

C The dynamic segment is named [id], but code uses productId.

D The code returns 400 if productId is missing, but productId is always undefined.

💡 Hint

Check the folder name in the file path carefully.

If the folder name does not match the URL segment, Next.js cannot match the route, causing 404.

❓ state_output

advanced

What is the value of slug in this catch-all API route?

In a Next.js API route file named pages/api/blog/[...slug].js, the handler is:

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

What is the JSON response when a request is made to /api/blog/2024/06/updates?

A {"slug":["2024","06","updates"]}

B {"slug":"2024/06/updates"}

C {"slug":["2024/06/updates"]}

D {"slug":null}

💡 Hint

Catch-all routes provide an array of path segments.

The catch-all dynamic route captures all path segments as an array in req.query.slug.

🧠 Conceptual

expert

Which statement about dynamic API routes in Next.js is TRUE?

Select the correct statement about dynamic API routes in Next.js.

A Catch-all dynamic API routes capture multiple path segments as an array in req.query.

B Dynamic API routes require manual parsing of URL parameters from req.url.

C Dynamic API routes can only have one dynamic segment per file path.

D Optional catch-all routes use the syntax [..param] without three dots.

💡 Hint

Think about how Next.js handles multiple path segments in dynamic routes.

Catch-all routes use [...param] syntax and provide an array of segments in req.query.param.