Why API routes serve backend logic in NextJS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do Next.js API routes run on the server?

In Next.js, API routes are used to handle backend logic. Why do these routes run on the server instead of the client?

A Because API routes are compiled into static HTML files.

B Because API routes need to securely access databases and environment variables, which should not be exposed to the client.

C Because API routes are only used to render UI components.

D Because API routes are faster when run on the client browser.

💡 Hint

Think about what kind of data should stay secret and where it should be processed.

API routes run on the server to keep sensitive data safe, like database credentials and secret keys. Running them on the client would expose this information.

❓ component_behavior

intermediate

What happens when a Next.js API route is called?

When a client calls a Next.js API route, what is the typical behavior of that route?

A It executes server-side code, processes the request, and sends back a JSON response.

B It directly updates the client UI without contacting the server.

C It reloads the entire Next.js page on the client.

D It compiles new React components on the client.

💡 Hint

Think about what an API usually does when called.

API routes run server-side code to handle requests and send back data, often in JSON format, without reloading the page.

📝 Syntax

advanced

Identify the correct Next.js API route handler syntax

Which option shows the correct way to define a Next.js API route handler that returns a JSON message?

A function handler(req, res) { res.send('Hello from API') } export default handler

B export function handler(req, res) { return { message: 'Hello from API' } }

C export default async function handler(req) { res.json({ message: 'Hello' }) }

D export default function handler(req, res) { res.status(200).json({ message: 'Hello from API' }) }

💡 Hint

Check how the response object is used to send JSON and the function export style.

The correct syntax exports a default function with (req, res) parameters and uses res.status().json() to send JSON.

🔧 Debug

advanced

Why is this Next.js API route not recommended?

Consider this API route code:

export default function handler(req, res) { res.json({ message: 'Hi' }) }

Why is this not the recommended way to write it?

A Because res.json is called without setting a status code first.

B Because the function is missing the async keyword.

C Because res.json is not a function on the response object in Next.js API routes.

D Because the function does not return a value.

💡 Hint

Next.js recommends explicitly setting the status code before sending JSON.

Although res.json() works and defaults to status 200, the recommended syntax uses res.status(200).json() to explicitly set the status code.

❓ state_output

expert

What is the output of this Next.js API route when called with a POST request?

Given this API route code:

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const data = await new Promise(resolve => setTimeout(() => resolve({ success: true }), 100))
    res.status(201).json(data)
  } else {
    res.status(405).json({ error: 'Method not allowed' })
  }
}

What will the client receive if it sends a POST request?

A An empty response with HTTP status 200

B {"error":"Method not allowed"} with HTTP status 405

C {"success":true} with HTTP status 201

D A JSON parse error because the response is delayed

💡 Hint

Look at the method check and the response sent for POST requests.

The route waits 100ms, then sends a JSON response with { success: true } and status 201 for POST requests.