HTTP method handlers (GET, POST) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js API route GET handler?

Consider this Next.js API route handler. What will the client receive when making a GET request?

NextJS

export async function GET(request) {
  return new Response(JSON.stringify({ message: 'Hello GET' }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
}

A {"message":"Hello GET"}

B SyntaxError

C {"error":"Method not allowed"}

D Hello GET

💡 Hint

Look at how the response is constructed with JSON.stringify and content type.

The GET handler returns a JSON string with the message key. The response content type is application/json, so the client receives the JSON string.

📝 Syntax

intermediate

Which option correctly defines a POST handler in Next.js API route?

Select the option that correctly defines a POST handler function in Next.js API route file.

A

export async function POST() {
  return new Response('No request param');
}

B

export async function POST(request) {
  const data = await request.json();
  return new Response(JSON.stringify({ received: data }), { status: 201 });
}

C

export function post(request) {
  return new Response('OK');
}

D

export async function POST(request) {
  return 'OK';
}

💡 Hint

Remember the handler must be named exactly POST and accept the request parameter.

Option B correctly defines an async POST function that reads JSON from the request and returns a Response object with status 201.

Option B uses lowercase 'post' which Next.js does not recognize.

Option B lacks the request parameter needed to read data.

Option B returns a string instead of a Response object, which is invalid.

❓ state_output

advanced

What is the response status code after this POST handler runs?

Given this POST handler, what status code will the client receive?

NextJS

export async function POST(request) {
  const body = await request.json();
  if (!body.name) {
    return new Response('Missing name', { status: 400 });
  }
  return new Response('Created', { status: 201 });
}

A 201

B 200

C 400

D 500

💡 Hint

Check the condition for missing name and what happens if name exists.

If the request JSON has a 'name' property, the handler returns status 201. Otherwise, it returns 400.

🔧 Debug

advanced

Which option causes a runtime error in this Next.js API route?

Identify which POST handler option will cause a runtime error when called.

A

export async function POST(request) {
  const data = await request.json();
  return new Response(JSON.stringify(data));
}

B

export async function POST(request) {
  const data = await request.text();
  return new Response(data);
}

C

export async function POST() {
  const data = await request.json();
  return new Response(JSON.stringify(data));
}

D

export async function POST(request) {
  return new Response('OK');
}

💡 Hint

Check if the function parameters match usage inside the function.

Option C lacks the request parameter but tries to use it, causing a ReferenceError at runtime.

Other options correctly accept request and use it properly.

🧠 Conceptual

expert

Why should Next.js API route handlers return a Response object instead of a plain string?

Choose the best explanation for why Next.js API route handlers like GET or POST should return a Response object rather than just a string.

A Response objects are required only for POST, not GET handlers.

B Returning strings causes Next.js to crash immediately.

C Strings are automatically converted to JSON, which is not always desired.

D Response objects allow setting status codes and headers, which strings alone cannot provide.

💡 Hint

Think about what extra information a Response object can carry.

Response objects let you control HTTP status codes and headers like content type. Returning just a string limits control over the response.