Redirect and rewrite in middleware in NextJS - Step-by-Step Execution

Concept Flow - Redirect and rewrite in middleware

Request comes in

↓

Middleware runs

↓

Redirect

↓

New URL

↓

Browser

When a request arrives, middleware checks it. It can redirect the browser to a new URL or rewrite the request to serve different content without changing the URL.

Execution Sample

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  if (request.nextUrl.pathname === '/old') {
    return NextResponse.redirect(new URL('/new', request.url));
  }
  if (request.nextUrl.pathname === '/rewrite') {
    return NextResponse.rewrite(new URL('/api/data', request.url));
  }
}

Middleware redirects '/old' to '/new' and rewrites '/rewrite' to serve '/api/data' content.

Execution Table

Step	Request Path	Condition Checked	Action Taken	Resulting URL	Browser URL
1	/old	Is path '/old'?	Yes - Redirect	/new	/new
2	/new	Is path '/old'?	No	No action	/new
3	/rewrite	Is path '/old'?	No	Check next condition	/rewrite
4	/rewrite	Is path '/rewrite'?	Yes - Rewrite	/api/data	/rewrite

💡 Middleware stops after redirect or rewrite action; browser URL changes only on redirect.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
request.nextUrl.pathname	/old	/old	/rewrite	/rewrite	/rewrite
action	none	redirect to /new	none	rewrite to /api/data	rewrite to /api/data
browser URL	/old	/new	/rewrite	/rewrite	/rewrite

Key Moments - 2 Insights

Why does the browser URL change after a redirect but not after a rewrite?

Redirect sends a response telling the browser to load a new URL, so the browser URL updates (see execution_table step 1). Rewrite changes the server's internal request path without telling the browser, so the browser URL stays the same (see step 4).

What happens if multiple conditions match in middleware?

Middleware returns immediately after the first redirect or rewrite. Later conditions are not checked (see execution_table steps 1 and 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the browser URL after step 1?

A /rewrite

B /old

C /new

D /api/data

💡 Hint

Check the 'Browser URL' column in execution_table row for step 1.

At which step does the middleware perform a rewrite?

A Step 4

B Step 3

C Step 1

D Step 5

💡 Hint

Look at the 'Action Taken' column for rewrite action in execution_table.

If the request path was '/old' and the redirect was removed, what would happen at step 1?

A Redirect to /new

B No action, continue processing

C Rewrite to /api/data

D Error thrown

💡 Hint

Refer to execution_table step 1 and the conditions checked.

Concept Snapshot

Middleware intercepts requests in Next.js.
Use NextResponse.redirect() to send browser to a new URL.
Use NextResponse.rewrite() to serve different content without changing browser URL.
Redirect changes browser URL; rewrite does not.
Middleware stops after first redirect or rewrite.
Useful for URL changes and content routing.

Full Transcript

In Next.js middleware, when a request arrives, the middleware function runs first. It checks the request path. If the path is '/old', it redirects the browser to '/new', changing the browser's URL. If the path is '/rewrite', it rewrites the request internally to '/api/data' without changing the browser URL. The middleware returns immediately after redirect or rewrite, so only one action happens per request. Redirect tells the browser to load a new page, while rewrite serves different content behind the scenes. This helps manage URLs and content dynamically before the page loads.

Practice

1. What is the main difference between a redirect and a rewrite in Next.js middleware?

easy

A. Rewrite changes the URL in the browser, redirect does not.

B. Redirect changes the URL in the browser, rewrite does not.

C. Redirect and rewrite both change the URL in the browser.

D. Neither redirect nor rewrite affect the URL in the browser.

Solution

1. Step 1: Understand redirect behavior

   A redirect sends the user to a new URL and updates the browser's address bar to that URL.

2. Step 2: Understand rewrite behavior

   A rewrite changes the content served without changing the URL shown in the browser.

3. Final Answer:

   Redirect changes the URL in the browser, rewrite does not. -> Option B

4. Quick Check:

   Redirect updates URL, rewrite keeps URL same [OK]

Hint: Redirect changes URL; rewrite keeps URL same [OK]

Common Mistakes:

• Thinking rewrite changes browser URL
• Confusing redirect with rewrite
• Assuming both always change URL

2. Which of the following is the correct way to perform a redirect in Next.js middleware?

easy

A. return NextResponse.redirect('/home');

B. return NextResponse.rewrite(new URL('/home', request.url));

C. return NextResponse.next('/home');

D. return NextResponse.redirect(new URL('/home', request.url));

Solution

1. Step 1: Check NextResponse.redirect syntax

   The redirect method requires a full URL object, created with new URL(path, base).

2. Step 2: Validate options

   return NextResponse.redirect(new URL('/home', request.url)); correctly uses new URL with request.url as base. return NextResponse.redirect('/home'); incorrectly passes a string instead of URL object.

3. Final Answer:

   return NextResponse.redirect(new URL('/home', request.url)); -> Option D

4. Quick Check:

   Redirect needs URL object [OK]

Hint: Use new URL(path, request.url) for redirects [OK]

Common Mistakes:

• Passing string directly to redirect
• Using rewrite instead of redirect
• Missing base URL in new URL()

3. Given this middleware code snippet, what will happen when a user visits '/dashboard'?

import { NextResponse } from 'next/server';
export function middleware(request) {
  if (request.nextUrl.pathname === '/dashboard') {
    return NextResponse.rewrite(new URL('/profile', request.url));
  }
  return NextResponse.next();
}

medium

A. User sees content from '/profile' but URL stays '/dashboard'.

B. User is redirected to '/profile' and URL changes.

C. User stays on '/dashboard' with original content.

D. Middleware throws an error due to incorrect syntax.

Solution

1. Step 1: Analyze rewrite usage

   The code uses NextResponse.rewrite to serve '/profile' content when URL is '/dashboard'.

2. Step 2: Understand rewrite effect on URL

   Rewrite changes content served but keeps the browser URL unchanged as '/dashboard'.

3. Final Answer:

   User sees content from '/profile' but URL stays '/dashboard'. -> Option A

4. Quick Check:

   Rewrite changes content, not URL [OK]

Hint: Rewrite serves new content but keeps URL same [OK]

Common Mistakes:

• Confusing rewrite with redirect
• Expecting URL to change on rewrite
• Assuming middleware throws error here

4. Identify the error in this middleware code that tries to redirect users from '/old' to '/new':

import { NextResponse } from 'next/server';
export function middleware(request) {
  if (request.nextUrl.pathname === '/old') {
    return NextResponse.redirect('/new');
  }
  return NextResponse.next();
}

medium

A. The condition should check request.url, not request.nextUrl.pathname.

B. Middleware must be async to use redirect.

C. Redirect requires a full URL object, not a string.

D. NextResponse.next() cannot be returned in middleware.

Solution

1. Step 1: Check redirect argument type

   NextResponse.redirect expects a URL object, not a string path.

2. Step 2: Validate other parts

   Condition and NextResponse.next() usage are correct; async not required here.

3. Final Answer:

   Redirect requires a full URL object, not a string. -> Option C

4. Quick Check:

   Redirect needs URL object, not string [OK]

Hint: Redirect needs new URL(path, request.url) [OK]

Common Mistakes:

• Passing string directly to redirect
• Making middleware async unnecessarily
• Checking wrong request property

5. You want to redirect users to '/login' if they visit any page except '/public' or '/login'. Which middleware code correctly implements this logic?

hard

A. if (!['/public', '/login'].includes(request.nextUrl.pathname)) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();

B. if (['/public', '/login'].includes(request.nextUrl.pathname)) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();

C. if (request.nextUrl.pathname !== '/public' || request.nextUrl.pathname !== '/login') {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();

D. if (request.nextUrl.pathname === '/public' && request.nextUrl.pathname === '/login') {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();

Solution

1. Step 1: Understand condition logic

   We want to redirect if the path is NOT '/public' or '/login'. Using !includes checks this correctly.

2. Step 2: Check each option's condition

   if (!['/public', '/login'].includes(request.nextUrl.pathname)) { return NextResponse.redirect(new URL('/login', request.url)); } return NextResponse.next(); correctly uses negation with includes. if (['/public', '/login'].includes(request.nextUrl.pathname)) { return NextResponse.redirect(new URL('/login', request.url)); } return NextResponse.next(); redirects only on '/public' or '/login' which is wrong. Options C and D have logical errors in conditions.

3. Final Answer:

   Option A code correctly redirects except for '/public' and '/login'. -> Option A

4. Quick Check:

   Use !includes for exclusion check [OK]

Hint: Use !includes to exclude paths for redirect [OK]

Common Mistakes:

• Using OR instead of AND in conditions
• Redirecting on allowed paths
• Incorrect logical negation