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.

Practice

1. In Next.js API routes, how do you define a handler for a GET request?

easy

A. Define a function named handleGetRequest and call it manually.

B. Export an async function named GET from the route file.

C. Use app.get() inside the route file.

D. Export a function named getHandler from the route file.

Solution

1. Step 1: Understand Next.js route handler naming

   Next.js expects exported async functions named after HTTP methods like GET or POST to handle those requests.

2. Step 2: Identify the correct naming convention

   Only exporting an async function named GET will handle GET requests automatically.

3. Final Answer:

   Export an async function named GET from the route file. -> Option B

4. Quick Check:

   GET handler = async function named GET [OK]

Hint: Name the function exactly GET to handle GET requests [OK]

Common Mistakes:

• Using incorrect function names like getHandler
• Trying to call handlers manually
• Using Express.js style app.get() in Next.js route files

2. Which of the following is the correct syntax to define a POST handler in a Next.js route file?

easy

A. export async function POST(request) { /* code */ }

B. export async function post(request) { /* code */ }

C. export function POST(request) { /* code */ }

D. export async function handlePOST(request) { /* code */ }

Solution

1. Step 1: Check function naming and case sensitivity

   Next.js requires the handler function to be named exactly POST in uppercase to handle POST requests.

2. Step 2: Confirm async keyword usage

   Handler functions should be async to handle asynchronous operations like reading request body.

3. Final Answer:

   export async function POST(request) { /* code */ } -> Option A

4. Quick Check:

   POST handler = async function named POST [OK]

Hint: Use uppercase POST and async keyword for POST handlers [OK]

Common Mistakes:

• Using lowercase 'post' instead of uppercase 'POST'
• Omitting async keyword
• Wrong function names like handlePOST

3. Given this Next.js route handler code, what will be the response to a POST request?

export async function POST(request) {
  const data = await request.json();
  return new Response(JSON.stringify({ message: `Hello, ${data.name}!` }), { status: 200 });
}

And the client sends JSON {"name": "Alice"} in the POST body.

medium

A. SyntaxError due to missing await

B. Empty response with status 200

C. {"message":"Hello, Alice!"}

D. Error: request.json() is not a function

Solution

1. Step 1: Understand request.json() usage

   The code uses await request.json() to parse the JSON body sent by the client, which contains {"name": "Alice"}.

2. Step 2: Construct response with personalized message

   The response JSON string includes the message "Hello, Alice!" using the parsed data.name.

3. Final Answer:

   {"message":"Hello, Alice!"} -> Option C

4. Quick Check:

   POST JSON parsed and response includes name [OK]

Hint: Use await request.json() to read POST JSON body [OK]

Common Mistakes:

• Forgetting to await request.json()
• Returning empty or wrong response
• Misnaming the data property

4. Identify the error in this Next.js route file code for handling GET and POST requests:

export async function GET() {
  return new Response('Hello GET');
}

export function POST(request) {
  const data = request.json();
  return new Response(`Hello ${data.name}`);
}

medium

A. POST handler should be named post in lowercase

B. GET handler should not return Response directly

C. GET handler must accept a request parameter

D. POST handler is missing async keyword and await for request.json()

Solution

1. Step 1: Check POST handler async usage

   The POST handler calls request.json() which returns a promise, so it must be awaited and the function must be async.

2. Step 2: Confirm GET handler and naming

   The GET handler is correctly async and returns a Response; naming and parameters are correct.

3. Final Answer:

   POST handler is missing async keyword and await for request.json() -> Option D

4. Quick Check:

   Async + await needed for request.json() in POST [OK]

Hint: Always use async and await when calling request.json() [OK]

Common Mistakes:

• Not marking POST handler async
• Not awaiting request.json()
• Incorrect handler function names

5. You want to create a Next.js route that responds to both GET and POST requests. The GET returns a JSON list of items, and the POST adds a new item sent in JSON body. Which is the best way to structure your route file?

hard

A. Export async functions named GET and POST; GET returns JSON list; POST reads JSON body and returns updated list.

B. Export a single function handling both GET and POST by checking request.method manually.

C. Use middleware to separate GET and POST logic in different files.

D. Define GET and POST as methods inside a class and export the class.

Solution

1. Step 1: Understand Next.js route handler pattern

   Next.js expects separate exported async functions named after HTTP methods like GET and POST to handle those requests cleanly.

2. Step 2: Structure handlers for each method

   Define GET to return the JSON list and POST to read the JSON body and return the updated list, each in their own async function.

3. Final Answer:

   Export async functions named GET and POST; GET returns JSON list; POST reads JSON body and returns updated list. -> Option A

4. Quick Check:

   Separate GET and POST async functions = clean Next.js pattern [OK]

Hint: Use separate async GET and POST functions for clarity [OK]

Common Mistakes:

• Combining GET and POST in one function
• Using classes or middleware unnecessarily
• Not returning proper JSON responses