All 5 Middleware questions
More in Middleware
What is middleware in Next.js, and when does it run? How do you limit which routes your middleware actually applies to? How would you use middleware to redirect users based on their location or device type? What performance considerations should you keep in mind when writing middleware, since it runs on every matched request?
Advertisement
Back to results for “Applications”
Next.js › Middleware

How do you rewrite a request to a different path using middleware without changing the URL the user sees?

Intermediate

Answer

You return a rewrite response from your middleware function pointing to the internal path you actually want to serve, and Next.js will render that different page while keeping the original URL visible in the user's browser address bar, which is useful for A/B testing or serving different content based on conditions.
import { NextResponse } from 'next/server';

export function middleware(request) {
  if (request.cookies.get('experiment') === 'variant-b') {
    return NextResponse.rewrite(new URL('/variant-b', request.url));
  }
}
Real-world example A company runs an A/B test on its homepage, silently serving a different page layout to half of its visitors using middleware rewrites, without their URL ever changing.

Common follow-ups: What is the difference between a redirect and a rewrite in middleware?;How do you assign users consistently to the same A/B test variant?

Redirects & Rewrites Configuration;Testing Next.js Applications
All 5 Middleware questions