Response formatting in NextJS - Step-by-Step Execution

Concept Flow - Response formatting

Request Received

↓

Process Request Handler

↓

Create Response Object

↓

Set Headers & Status

↓

Format Response Body

↓

Send Response to Client

↓

End

This flow shows how Next.js API routes receive a request, format the response with headers and body, then send it back to the client.

Execution Sample

NextJS

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

This code handles a GET request and returns a JSON response with status 200 and proper content-type header.

Execution Table

Step	Action	Details	Result
1	Receive GET request	Client calls API endpoint	Request object created
2	Execute GET handler	Runs exported GET function	Response object created
3	Format response body	JSON.stringify({ message: 'Hello' })	{"message":"Hello"}
4	Set status and headers	status=200, Content-Type=application/json	Response ready with headers
5	Send response	Response sent to client	Client receives JSON with message
6	End	Request handled fully	Connection closed

💡 Response sent and connection closed, request lifecycle complete

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
request	undefined	Request object	Request object	Request object	Request object
response	undefined	Response object	Response object with body	Response object with headers	Response object sent

Key Moments - 2 Insights

Why do we use JSON.stringify in the response body?

Because the Response body must be a string or a stream. JSON.stringify converts the JavaScript object into a JSON string, as shown in execution_table step 3.

What happens if we forget to set the Content-Type header?

The client might not interpret the response as JSON. Setting 'Content-Type: application/json' in step 4 ensures the client knows how to read the response.

Visual Quiz - 3 Questions

Look at the execution table, what is the response body after step 3?

A {"message":"Hello"}

B { message: 'Hello' }

C "Hello"

D undefined

💡 Hint

Check the 'Result' column in row for step 3 in execution_table

At which step is the Content-Type header set?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Action' and 'Details' columns in execution_table step 4

If we change status to 404, which step changes in the execution table?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Status is set in step 4 under 'Set status and headers'

Concept Snapshot

Next.js API response formatting:
- Use Response object to send data
- Body must be string or stream (use JSON.stringify for JSON)
- Set status code (e.g., 200)
- Set headers (e.g., Content-Type)
- Return Response from handler
- Client receives formatted response

Full Transcript

In Next.js, when an API route receives a request, it runs the handler function like GET. The handler creates a Response object with a body, status, and headers. The body is usually a string, so we use JSON.stringify to convert objects to JSON strings. We set the status code to tell the client if the request was successful. Headers like Content-Type tell the client how to read the response. Finally, the Response is sent back to the client, completing the request cycle.