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.

Practice

1. What is the main purpose of setting the Content-Type header in a Next.js API response?

easy

A. To set the status code of the response

B. To specify the HTTP method used in the request

C. To define the URL path of the API endpoint

D. To tell the client what type of data is being sent

Solution

1. Step 1: Understand the role of headers in HTTP responses

   Headers provide metadata about the response, including data format.

2. Step 2: Identify the purpose of Content-Type

   This header tells the client how to interpret the response body, e.g., JSON or HTML.

3. Final Answer:

   To tell the client what type of data is being sent -> Option D

4. Quick Check:

   Content-Type = Data format info [OK]

Hint: Content-Type always describes the data format sent [OK]

Common Mistakes:

• Confusing Content-Type with HTTP method
• Thinking Content-Type sets status code
• Mixing URL path with headers

2. Which of the following is the correct way to create a JSON response with status 200 in a Next.js API route?

easy

A. return new Response(data, { statusCode: 200, contentType: 'application/json' })

B. return Response(data, 200, { 'Content-Type': 'application/json' })

C. return new Response(JSON.stringify(data), { status: 200, headers: { 'Content-Type': 'application/json' } })

D. return new Response(JSON.stringify(data), 200, { 'Content-Type': 'text/plain' })

Solution

1. Step 1: Check the Response constructor syntax

   It takes the body as first argument, and an options object with status and headers.

2. Step 2: Verify correct headers and status usage

   Headers must include 'Content-Type' with 'application/json' for JSON data, and status should be 200.

3. Final Answer:

   return new Response(JSON.stringify(data), { status: 200, headers: { 'Content-Type': 'application/json' } }) -> Option C

4. Quick Check:

   Response(body, {status, headers}) = return new Response(JSON.stringify(data), { status: 200, headers: { 'Content-Type': 'application/json' } }) [OK]

Hint: Use new Response with JSON.stringify and proper headers [OK]

Common Mistakes:

• Passing data directly without JSON.stringify
• Using wrong header keys like contentType
• Incorrect argument order in Response

3. Consider this Next.js API handler code snippet:

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

What will be the HTTP status code and response body sent to the client?

medium

A. Status 201 with body '{"message":"Hello"}'

B. Status 200 with body '{"message":"Hello"}'

C. Status 201 with body 'Hello'

D. Status 200 with body 'Hello'

Solution

1. Step 1: Identify the status code set in the Response

   The code sets status to 201 explicitly in the Response options.

2. Step 2: Check the response body content

   The body is JSON.stringify(data), which converts { message: 'Hello' } to '{"message":"Hello"}'.

3. Final Answer:

   Status 201 with body '{"message":"Hello"}' -> Option A

4. Quick Check:

   Status and JSON body match Status 201 with body '{"message":"Hello"}' [OK]

Hint: Look for status in Response options and JSON.stringify body [OK]

Common Mistakes:

• Assuming default status 200 instead of 201
• Confusing raw string with JSON string
• Ignoring JSON.stringify usage

4. You wrote this Next.js API handler:

export async function POST() {
  const data = { success: true };
  return new Response(data, {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
}

What is the problem with this code?

medium

A. Headers object is missing required 'Accept' header

B. Response body must be a string or Blob, not an object

C. Status code 200 is invalid for POST requests

D. The function should not be async

Solution

1. Step 1: Check the Response body type

   The Response constructor expects a string, Blob, or similar, not a plain object.

2. Step 2: Identify the fix

   The object must be converted to a string using JSON.stringify before passing to Response.

3. Final Answer:

   Response body must be a string or Blob, not an object -> Option B

4. Quick Check:

   Response body type error = Response body must be a string or Blob, not an object [OK]

Hint: Always JSON.stringify objects before sending in Response body [OK]

Common Mistakes:

• Passing raw objects directly to Response
• Thinking status 200 is invalid for POST
• Adding unnecessary headers like Accept

5. You want to send a plain text response with status 404 from a Next.js API route. Which code snippet correctly formats this response?

hard

A. return new Response('Not Found', { status: 404, headers: { 'Content-Type': 'text/plain' } })

B. return new Response({ message: 'Not Found' }, { status: 404, headers: { 'Content-Type': 'application/json' } })

C. return new Response('Not Found', 404, { 'Content-Type': 'text/plain' })

D. return Response('Not Found', { status: 404, contentType: 'text/plain' })

Solution

1. Step 1: Confirm Response constructor usage

   It takes the body string first, then an options object with status and headers.

2. Step 2: Verify correct headers and status for plain text

   Status 404 is correct for 'Not Found', and Content-Type must be 'text/plain' for plain text.

3. Final Answer:

   return new Response('Not Found', { status: 404, headers: { 'Content-Type': 'text/plain' } }) -> Option A

4. Quick Check:

   Plain text + 404 status + correct headers = return new Response('Not Found', { status: 404, headers: { 'Content-Type': 'text/plain' } }) [OK]

Hint: Use string body with status and 'text/plain' header [OK]

Common Mistakes:

• Passing object instead of string for plain text
• Wrong argument order in Response
• Using contentType instead of headers key