Response formatting in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js API route return?

Consider this Next.js API route handler. What is the JSON response sent to the client?

NextJS

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

A {"message":"Hello, world!"}

B "Hello, world!"

C {"msg":"Hello, world!"}

D {"message":"hello world"}

💡 Hint

Look at the JSON.stringify argument and the key used.

The handler returns a Response with JSON stringified object { message: 'Hello, world!' }. So the JSON response is {"message":"Hello, world!"}.

📝 Syntax

intermediate

Which option correctly formats a JSON response in Next.js API route?

You want to return a JSON response with status 201 and a body { success: true }. Which code snippet is correct?

A return Response.json({ success: true }, { status: 201 });

B return new Response(JSON.stringify({ success: true }), { status: 201, headers: { 'Content-Type': 'application/json' } });

C return new Response({ success: true }, { status: 201 });

D return new Response(JSON.stringify({ success: true }), 201);

💡 Hint

Check how Response constructor expects arguments and headers.

Option B correctly uses new Response with JSON stringified body, status, and headers. Option B is invalid because Response.json does not exist. Option B passes an object directly which causes error. Option B passes status as second argument without headers, invalid.

🔧 Debug

advanced

Why does this Next.js API route return a plain text response instead of JSON?

Look at this code snippet. Why does the client receive plain text instead of JSON?

NextJS

export async function GET() {
  return new Response({ message: 'Hi' }, { status: 200 });
}

A Because the body is an object, not a string, so Response converts it to plain text '[object Object]'.

B Because the status code 200 is missing the JSON flag.

C Because the Content-Type header is set to 'text/plain' by default.

D Because the function is async but does not await anything.

💡 Hint

Check what happens when Response body is an object instead of a string.

Response expects a string or a stream as body. Passing an object causes it to call toString(), resulting in '[object Object]' plain text. No JSON is sent.

❓ state_output

advanced

What is the output of this Next.js API route with headers?

Given this API route, what is the value of the 'X-Custom-Header' in the response?

NextJS

export async function GET() {
  return new Response(JSON.stringify({ data: 123 }), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
      'X-Custom-Header': 'MyValue'
    }
  });
}

A undefined

B myvalue

C X-Custom-Header

D MyValue

💡 Hint

Look at the headers object keys and values.

The header 'X-Custom-Header' is set to 'MyValue' exactly as given in the headers option.

🧠 Conceptual

expert

What error occurs if you forget to set Content-Type for JSON response in Next.js API route?

If you return JSON stringified data in a Response but omit the 'Content-Type' header, what will happen when the client tries to parse the response as JSON?

A The server will throw a SyntaxError before sending the response.

B The response will automatically have Content-Type set to 'application/json' by Next.js.

C The client may fail to parse the response as JSON or treat it as plain text, causing runtime errors.

D The client will receive a 500 Internal Server Error.

💡 Hint

Think about how browsers and clients use Content-Type to interpret response data.

Without Content-Type: application/json, clients may not parse the response as JSON automatically, leading to errors or unexpected behavior.