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
}

Need a 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
}

Need a 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
}

Need a 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
}

Need a hint?

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