Request parsing in route handlers in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js route handler when receiving a POST request with JSON body?

Consider this Next.js API route handler in the app/api/data/route.js file:

export async function POST(request) {
  const data = await request.json();
  return new Response(JSON.stringify({ received: data.message }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

If the client sends a POST request with JSON body {"message": "hello"}, what will be the response body?

NextJS

export async function POST(request) {
  const data = await request.json();
  return new Response(JSON.stringify({ received: data.message }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

A {"message":"hello"}

B {"received":null}

C {"received":"hello"}

D SyntaxError

💡 Hint

Remember that request.json() parses the JSON body and returns the object.

The handler reads the JSON body, extracts the message property, and returns it inside a new JSON object with key received.

📝 Syntax

intermediate

Which option correctly parses URL query parameters in a Next.js route handler?

Given a GET request to /api/items?category=books&sort=asc, which code snippet correctly extracts the category and sort query parameters inside a Next.js route handler?

NextJS

export async function GET(request) {
  // extract query params here
}

A

const query = JSON.parse(request.url);
const category = query.category;
const sort = query.sort;

B const { category, sort } = request.query;

C

const params = request.params;
const category = params.category;
const sort = params.sort;

D

const url = new URL(request.url);
const category = url.searchParams.get('category');
const sort = url.searchParams.get('sort');

💡 Hint

Think about how to get query parameters from the full URL string.

In Next.js route handlers, request.url is a full URL string. Creating a URL object allows access to searchParams to get query parameters.

🔧 Debug

advanced

Why does this Next.js route handler throw an error when parsing JSON body?

Examine this Next.js POST route handler:

export async function POST(request) {
  const data = request.json();
  return new Response(JSON.stringify({ name: data.name }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

What is the cause of the error?

NextJS

export async function POST(request) {
  const data = request.json();
  return new Response(JSON.stringify({ name: data.name }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

A Missing await before request.json(), so data is a Promise, not the parsed object

B request.json() is not a function on the request object

C Response constructor requires a string, but JSON.stringify returns an object

D Headers object is missing required 'Accept' header

💡 Hint

Check if the JSON parsing is asynchronous and how the result is used.

request.json() returns a Promise. Without await, data is a Promise, so accessing data.name causes an error.

❓ state_output

advanced

What is the response when parsing form data in a Next.js POST route handler?

Given this Next.js route handler:

export async function POST(request) {
  const formData = await request.formData();
  const username = formData.get('username');
  return new Response(`Hello, ${username}!`);
}

If the client sends a form with username=Alice, what is the response text?

NextJS

export async function POST(request) {
  const formData = await request.formData();
  const username = formData.get('username');
  return new Response(`Hello, ${username}!`);
}

A Hello, undefined!

B Hello, Alice!

C SyntaxError

D Hello, [object FormData]!

💡 Hint

Remember how to extract values from form data.

formData.get('username') returns the string value for the key 'username'. The response includes that value in the greeting.

🧠 Conceptual

expert

Which statement about Next.js route handler request parsing is TRUE?

Choose the correct statement about parsing requests in Next.js route handlers.

A The <code>request.json()</code> method returns a Promise that resolves to the parsed JSON object from the request body.

B The <code>request.body</code> property contains the parsed JSON object directly without needing to await anything.

C To parse URL query parameters, you can directly access <code>request.query</code> in the route handler.

D The <code>request.formData()</code> method returns a synchronous object representing form fields.

💡 Hint

Think about asynchronous parsing methods and standard Web API request properties.

request.json() is asynchronous and returns a Promise resolving to the parsed JSON. Other options are incorrect because request.body is a stream, request.query does not exist, and formData() returns a Promise.