Mastering Middleware in Next.js: Real-World Applications

Middleware in Next.js offers a robust mechanism to intercept and modify requests before they reach your application. Whether you need to inject headers, manage redirects, or apply conditional access controls, middleware gives you the flexibility to handle it all at the edge. In this blog, we’ll break down how middleware works in Next.js and walk through five practical examples to help you get started.

What Is Middleware in Next.js?

Middleware in Next.js operates at the edge and executes before your app processes a request. It provides a fast and efficient way to inspect and manipulate requests and responses, making it ideal for performance-critical features.

Key Benefits:

• Pre-render logic: Execute code before a page loads.
• Conditional routing: Redirect or rewrite requests based on logic.
• Authentication: Enforce access control based on user sessions.
• Edge performance: Run lightweight code close to the user.

Five Practical Use Cases for Next.js Middleware

1. Authentication & Authorization

Secure routes by verifying tokens or session cookies before granting access.

import { NextResponse } from ’next/server’;
export function middleware(request) {
  const token = request.cookies.get(’auth_token’);
  if (!token) {
    return NextResponse.redirect(new URL(’/login’, request.url));
  }
  return NextResponse.next();
}

2. A/B Testing

Split traffic between different versions of a page without relying on client-side logic.

export function middleware(request) {

  const randomBucket = Math.random() > 0.5 ? ’A’ : ’B’;

  const url = request.nextUrl.clone();

  url.pathname = `/variant-${randomBucket}`;

  return NextResponse.rewrite(url);

}

3. Geolocation-Based Routing

Direct users to region-specific pages based on their IP location.

export function middleware(request) {

  const country = request.geo?.country || ’US’;

  const url = request.nextUrl.clone();

  if (country === ’DE’) {

    url.pathname = `/de${url.pathname}`;

    return NextResponse.rewrite(url);
  }
  return NextResponse.next();
}

4. Custom Header Injection

Enhance responses with additional headers for tracking, analytics, or security.

export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set(’X-Custom-Header’, ’Next.js Middleware’);
  return response;
}

5. Maintenance Mode and Feature Flags

Redirect traffic to maintenance pages or toggle features using simple flags.

const isMaintenanceMode = true;

export function middleware(request) {

  if (isMaintenanceMode) {

    return NextResponse.rewrite(new URL(’/maintenance’, request.url));
  }
  return NextResponse.next();
}

Best Practices for Middleware

To get the most out of Next.js middleware:

• Keep logic minimal to maintain fast response times.
• Use environment variables for flags and conditional behavior.
• Avoid expensive operations in middleware as it runs on every request.
• Use it in middleware.ts or middleware.js at the project root or specific folders.
• Pair with edge functions when advanced logic is required.

Helpful Resources

🧠 Next.js Middleware Documentation

🌍 Vercel Edge Middleware Guide

🔐 JWT Authentication Example

Middleware in Next.js empowers developers to build faster, more secure applications with smart logic executed at the edge. Whether you’re implementing geo-routing, protecting routes, or experimenting with new features, middleware provides a scalable and efficient solution.

Adding this layer of control before your application handles requests ensures your Next.js projects remain performant, user-focused, and future-ready.