Redirect and rewrite in middleware in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Next.js middleware redirects?

Consider this Next.js middleware code snippet:

import { NextResponse } from 'next/server';

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

What will the user see if they visit /old-path?

NextJS

import { NextResponse } from 'next/server';

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

A The browser URL stays '/old-path' and the content of '/old-path' is shown.

B The browser URL stays '/old-path' but the content of '/new-path' is shown.

C The browser URL changes to '/new-path' but the content of '/old-path' is shown.

D The browser URL changes to '/new-path' and the content of '/new-path' is shown.

💡 Hint

Redirect changes the URL in the browser and sends a new request.

Using NextResponse.redirect() sends a redirect response to the browser, which updates the URL to the new path and loads that page's content.

❓ component_behavior

intermediate

What is the effect of this rewrite in Next.js middleware?

Look at this middleware code:

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  if (url.pathname === '/about') {
    url.pathname = '/company-info';
    return NextResponse.rewrite(url);
  }
  return NextResponse.next();
}

If a user visits /about, what will happen?

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  if (url.pathname === '/about') {
    url.pathname = '/company-info';
    return NextResponse.rewrite(url);
  }
  return NextResponse.next();
}

A The browser URL changes to '/company-info' but the content from '/about' is shown.

B The browser URL stays '/about' but the content from '/company-info' is shown.

C The browser URL stays '/about' and the content from '/about' is shown.

D The browser URL changes to '/company-info' and the content from '/company-info' is shown.

💡 Hint

Rewrite changes the resource served without changing the browser URL.

NextResponse.rewrite() changes the path the server uses to fetch content but keeps the browser URL unchanged.

📝 Syntax

advanced

Which middleware code correctly performs a conditional redirect in Next.js?

Choose the code snippet that correctly redirects users from '/login' to '/dashboard' only if they are authenticated.

A

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  const isAuth = request.cookies.get('auth')?.value === true;
  if (url.pathname === '/login' && isAuth) {
    url.pathname = '/dashboard';
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

B

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl;
  const isAuth = request.cookies.get('auth') === 'true';
  if (url.pathname === '/login' && isAuth) {
    url.pathname = '/dashboard';
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

C

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  const isAuth = request.cookies.get('auth')?.value === 'true';
  if (url.pathname === '/login' && isAuth) {
    url.pathname = '/dashboard';
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

D

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  const isAuth = request.cookies.get('auth')?.value === 'true';
  if (url.pathname === '/login' || isAuth) {
    url.pathname = '/dashboard';
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

💡 Hint

Check how cookies are accessed and the condition logic.

Option C correctly clones the URL, accesses the cookie value as a string, and uses && to check both conditions. Other options have errors in cookie access or logic.

🔧 Debug

advanced

Why does this Next.js middleware cause a runtime error?

Examine this middleware code:

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  if (url.pathname === '/profile') {
    url.pathname = '/user/profile';
    return NextResponse.rewrite(url);
  }
  if (url.pathname === '/dashboard') {
    return NextResponse.redirect('/home');
  }
  return NextResponse.next();
}

When visiting '/dashboard', the app crashes with an error. What is the cause?

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  if (url.pathname === '/profile') {
    url.pathname = '/user/profile';
    return NextResponse.rewrite(url);
  }
  if (url.pathname === '/dashboard') {
    return NextResponse.redirect('/home');
  }
  return NextResponse.next();
}

A NextResponse.redirect() requires a URL object, not a string, causing a runtime error.

B The middleware does not handle '/dashboard' correctly because '/home' does not exist.

C NextResponse.rewrite() cannot be used with '/user/profile' path.

D Cloning the URL causes the error when redirecting from '/dashboard'.

💡 Hint

Check the argument type passed to NextResponse.redirect().

NextResponse.redirect() expects a URL object or absolute URL string. Passing a relative string like '/home' causes a runtime error.

❓ state_output

expert

What is the final URL and content served after this complex middleware runs?

Given this Next.js middleware:

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  if (url.pathname.startsWith('/blog')) {
    url.pathname = url.pathname.replace('/blog', '/news');
    return NextResponse.rewrite(url);
  }
  if (url.pathname === '/old-home') {
    url.pathname = '/home';
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

If a user visits /blog/post-1 and then visits /old-home, what URLs will the browser show and what content will be served in each case?

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  if (url.pathname.startsWith('/blog')) {
    url.pathname = url.pathname.replace('/blog', '/news');
    return NextResponse.rewrite(url);
  }
  if (url.pathname === '/old-home') {
    url.pathname = '/home';
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

A Visiting '/blog/post-1' shows URL '/blog/post-1' with content from '/news/post-1'. Visiting '/old-home' changes URL to '/home' and shows '/home' content.

B Visiting '/blog/post-1' changes URL to '/news/post-1' and shows '/news/post-1' content. Visiting '/old-home' keeps URL '/old-home' but shows '/home' content.

C Visiting '/blog/post-1' changes URL to '/news/post-1' but shows '/blog/post-1' content. Visiting '/old-home' changes URL to '/home' but shows '/old-home' content.

D Visiting '/blog/post-1' keeps URL '/blog/post-1' and shows '/blog/post-1' content. Visiting '/old-home' keeps URL '/old-home' and shows '/old-home' content.

💡 Hint

Remember rewrite keeps URL, redirect changes URL.

Rewrite changes the resource served but keeps the URL. Redirect changes the URL and resource. So '/blog/post-1' URL stays but content is from '/news/post-1'. '/old-home' redirects to '/home' so URL and content change.