Redirect and rewrite in middleware in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of middleware in Next.js?

Middleware in Next.js runs before a request is completed. It can modify the request or response, such as redirecting users or rewriting URLs, helping control routing and access.

beginner

How do you perform a redirect in Next.js middleware?

Use the NextResponse.redirect() method with the target URL. This sends the user to a new location before the page loads.

intermediate

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

Redirect sends the user to a new URL and changes the browser address bar. Rewrite changes the URL internally without changing what the user sees in the address bar.

intermediate

Show a simple example of rewriting a URL in Next.js middleware.

In middleware, use NextResponse.rewrite(new URL('/new-path', request.url)) to serve content from '/new-path' while keeping the original URL visible to the user.

intermediate

Why might you use middleware to redirect users based on their location or device?

Middleware can check request details like headers or cookies and redirect users to region-specific pages or mobile versions, improving user experience without extra client code.

Which Next.js middleware method changes the URL the user sees in the browser?

A NextResponse.rewrite()

B NextResponse.redirect()

C NextResponse.next()

D NextResponse.json()

NextResponse.redirect() sends a redirect response that changes the browser's URL.

What does NextResponse.rewrite() do in Next.js middleware?

A Changes the URL internally without changing the browser address bar

B Redirects the user to a new URL

C Stops the request and returns an error

D Sends JSON data to the client

Rewrite changes the request URL internally but keeps the original URL visible to the user.

Where does Next.js middleware run in the request lifecycle?

A Before the request is completed

B After the page is rendered

C Only on the client side

D Only during build time

Middleware runs before the request finishes, allowing it to modify or redirect requests.

Which of these is a valid reason to use middleware for redirects?

A To change the page content after rendering

B To style the page dynamically

C To redirect users based on cookies or headers

D To fetch data from an API

Middleware can inspect cookies or headers to decide if a redirect is needed.

What is the correct way to rewrite a request to '/dashboard' in middleware?

A return NextResponse.redirect('/dashboard')

B return NextResponse.json({ path: '/dashboard' })

C return NextResponse.next()

D return NextResponse.rewrite(new URL('/dashboard', request.url))

NextResponse.rewrite() with a new URL rewrites the request internally.

Explain how you would use Next.js middleware to redirect users to a login page if they are not authenticated.

Think about checking user info and sending them somewhere else before loading the page.

Describe the difference between redirect and rewrite in Next.js middleware and when you might use each.

Consider what the user sees in the browser address bar.

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