Redirect and rewrite in middleware in NextJS - Mini Project: Build & Apply

Redirect and Rewrite in Middleware with Next.js

📖 Scenario: You are building a Next.js website that needs to control user navigation based on the URL path. Sometimes users should be redirected to a new page, and sometimes the URL should be rewritten internally without changing the visible URL.This helps keep URLs clean and user-friendly while managing content behind the scenes.

🎯 Goal: Build a Next.js middleware file that redirects users from /old-home to /home and rewrites requests from /profile to /user/profile internally.This means users typing /old-home will be sent to /home, and users typing /profile will see the profile page but keep the URL /profile in the browser.

📋 What You'll Learn

Create a middleware file named middleware.js in the root of the Next.js project

Use the Next.js NextResponse object to handle redirects and rewrites

Redirect requests from /old-home to /home with a 307 status

Rewrite requests from /profile to /user/profile without changing the URL

Export a middleware function that handles the request and returns the correct response

💡 Why This Matters

🌍 Real World

Middleware in Next.js is used to manage user navigation, enforce rules, and keep URLs clean and user-friendly.

💼 Career

Understanding middleware redirects and rewrites is important for building professional web apps that handle routing and user experience smoothly.

1

Create the middleware function and import NextResponse

Create a file named middleware.js and write the code to import NextResponse from next/server. Then create an exported function named middleware that takes a single parameter request.

NextJS

import { NextResponse } from 'next/server';

// Create and export the middleware function
export function middleware(request) {
  // Your code here
}

Hint

Use import { NextResponse } from 'next/server' to get the response helpers.

Define export function middleware(request) to start handling requests.

2

Add redirect logic for /old-home to /home

Inside the middleware function, check if request.nextUrl.pathname equals '/old-home'. If yes, return a redirect response to '/home' using NextResponse.redirect() with status code 307.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  // Redirect /old-home to /home
  // Your code here
}

Hint

Use request.nextUrl.pathname to get the current path.

Use NextResponse.redirect(new URL('/home', request.url), 307) to redirect with status 307.

3

Add rewrite logic for /profile to /user/profile

Extend the middleware function to check if request.nextUrl.pathname equals '/profile'. If yes, rewrite the request URL to '/user/profile' using NextResponse.rewrite() and return the response.

NextJS

import { NextResponse } from 'next/server';

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

  // Rewrite /profile to /user/profile
  // Your code here
}

Hint

Clone the URL with request.nextUrl.clone() before changing the pathname.

Use NextResponse.rewrite(url) to rewrite the request internally.

4

Return the original response for other paths

At the end of the middleware function, return NextResponse.next() to allow other requests to continue normally without redirect or rewrite.

NextJS

import { NextResponse } from 'next/server';

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

  if (request.nextUrl.pathname === '/profile') {
    const url = request.nextUrl.clone();
    url.pathname = '/user/profile';
    return NextResponse.rewrite(url);
  }

  // Allow other requests to continue
  // Your code here
}

Hint

Use return NextResponse.next() to let requests pass through unchanged.

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