Response modification in NextJS - Step-by-Step Execution

Concept Flow - Response modification

Request received

↓

Run server action or API handler

↓

Create initial Response object

↓

Modify Response (headers, status, body)

↓

Return modified Response

↓

Client receives updated response

This flow shows how Next.js server code creates and changes a response before sending it back to the client.

Execution Sample

NextJS

import { NextResponse } from 'next/server'

export async function GET() {
  let res = new NextResponse('Hello Next.js')
  res.headers.set('X-Custom-Header', 'MyValue')
  res.status = 201
  return res
}

This code creates a response, changes its header and status, then returns it.

Execution Table

Step	Action	Response Status	Headers	Body	Result
1	Create Response with body 'Hello Next.js'	200 (default)	{}	'Hello Next.js'	Response object created
2	Set header 'X-Custom-Header' to 'MyValue'	200	{X-Custom-Header: 'MyValue'}	'Hello Next.js'	Header added
3	Change status to 201	201	{X-Custom-Header: 'MyValue'}	'Hello Next.js'	Status updated
4	Return modified Response	201	{X-Custom-Header: 'MyValue'}	'Hello Next.js'	Response sent to client

💡 Response returned after modifications with status 201 and custom header

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
res.status	undefined	200	200	201	201
res.headers	empty	{}	{X-Custom-Header: 'MyValue'}	{X-Custom-Header: 'MyValue'}	{X-Custom-Header: 'MyValue'}
res.body	undefined	'Hello Next.js'	'Hello Next.js'	'Hello Next.js'	'Hello Next.js'

Key Moments - 2 Insights

Why does the response status start at 200 before we set it?

By default, the Response object has status 200 unless changed, as shown in step 1 and step 3 of the execution_table.

Can we add multiple headers after creating the Response?

Yes, headers can be added or changed anytime before returning the response, like in step 2 where a custom header is added.

Visual Quiz - 3 Questions

Look at the execution table, what is the response status after step 2?

A 200

B 201

C default undefined

D 400

💡 Hint

Check the 'Response Status' column at step 2 in the execution_table.

At which step is the custom header 'X-Custom-Header' added to the response?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Headers' column in the execution_table to see when the header appears.

If we did not change the status to 201 in step 3, what would be the final response status?

A 201

B 404

C 200

D 500

💡 Hint

Refer to the default status shown in step 1 of the execution_table.

Concept Snapshot

Next.js response modification:
- Create Response object with body
- Use res.headers.set() to add/change headers
- Use res.status = 201 to set HTTP status
- Return the modified Response
- Client receives updated status, headers, and body

Full Transcript

In Next.js, when a request arrives, the server runs a handler that creates a Response object. This Response starts with a default status of 200 and empty headers. You can add headers using res.headers.set() and change the status using res.status = 201. After making these changes, returning the Response sends it to the client with the updated status, headers, and body. This process lets you control exactly what the client receives.