Request modification in NextJS - Step-by-Step Execution

Concept Flow - Request modification

Client sends request

↓

Next.js Middleware intercepts

↓

Modify request (headers, url, etc.)

↓

Forward modified request

↓

Next.js Route Handler processes

↓

Response sent back to client

The client request is intercepted by Next.js middleware, which modifies it before forwarding to the route handler for processing.

Execution Sample

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  url.pathname = '/new-path';
  return NextResponse.rewrite(url);
}

This middleware intercepts requests and rewrites the URL path to '/new-path' before continuing.

Execution Table

Step	Action	Request URL	Modification	Resulting URL	Next Step
1	Client sends request	/old-path	None	/old-path	Middleware intercepts
2	Middleware clones URL	/old-path	Clone URL object	/old-path	Modify URL
3	Middleware modifies pathname	/old-path	Change pathname to '/new-path'	/new-path	Rewrite request
4	Middleware returns rewrite response	/old-path	Rewrite to '/new-path'	/new-path	Route handler processes
5	Route handler receives modified request	/new-path	None	/new-path	Send response
6	Response sent to client	/new-path	None	/new-path	End

💡 Request is rewritten to '/new-path' and processed by route handler before response is sent.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
request.nextUrl.pathname	/old-path	/old-path	/old-path	/new-path
url	undefined	URL object (clone)	URL object (modified)	URL object (modified)

Key Moments - 2 Insights

Why do we clone the URL before modifying it?

Cloning the URL creates a new object to safely modify without changing the original request URL directly, as shown in step 2 and 3 of the execution_table.

What happens if we don't return a NextResponse in middleware?

If middleware does not return a NextResponse, the request continues unchanged. The execution_table shows that returning NextResponse.rewrite triggers the URL change.

Visual Quiz - 3 Questions

Look at the execution_table, what is the request URL after step 3?

A /rewrite-path

B /old-path

C /new-path

D /modified-path

💡 Hint

Check the 'Resulting URL' column at step 3 in the execution_table.

At which step does the middleware send the modified request to the route handler?

A Step 4

B Step 2

C Step 5

D Step 6

💡 Hint

Look for when NextResponse.rewrite is returned in the execution_table.

If we skip cloning the URL and modify request.nextUrl.pathname directly, what changes in variable_tracker?

A url variable would be undefined

B request.nextUrl.pathname changes immediately without clone

C No change in variables

D Middleware fails to run

💡 Hint

Refer to variable_tracker showing cloning before modification.

Concept Snapshot

Next.js middleware can intercept requests to modify them.
Clone the request URL to safely change parts like pathname.
Return NextResponse.rewrite() with the new URL to forward modified request.
Route handler then processes the updated request.
This allows URL rewriting, header changes, or redirects before response.

Full Transcript

In Next.js, middleware runs before route handlers and can modify incoming requests. The middleware clones the request URL to avoid changing the original directly. It then modifies the clone, for example changing the pathname. Returning NextResponse.rewrite with the modified URL tells Next.js to process the request as if it was for the new URL. The route handler receives this modified request and sends back a response. This flow lets developers change request details like URL paths or headers before the main app logic runs.