Modern Middleware in Next.js 12 and Above: A Comprehensive Guide

In the latest versions of Next.js (12 and above), many developers face challenges when trying to implement middleware using the traditional approach "/page/../_middleware.{ts, js}". This often results many errors.

Vercel, the parent company of Next.js, has recently introduced a new method for integrating middleware into your Next.js project.

What Is Middleware?

In simple terms, middleware is a function that runs before a request is fully processed. It allows you to manipulate the response based on the incoming request by rewriting URLs, redirecting users, adding custom headers, or setting cookies.

Middleware Before Next.js 12

Previously, you could create a "_middleware.{ts, js}" file within any directory under "/pages/**". This meant that the execution of the middleware was tied to the directory where it was located.

Middleware in Next.js 12 and Beyond

With the release of Next.js 12, Vercel introduced a more streamlined method for implementing middleware. Now, you need to create a single middleware file in the root folder of your Next.js application, without using the "_" prefix. This middleware file can still have either a .ts or .js extension.

Note: The middleware defined this way will be invoked for every route in your application.

To specify which routes should use this middleware, you can utilize a custom matcher in an exported configuration object. Here's an example:

// middleware.ts

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/about')) {
    return NextResponse.rewrite(new URL('/about-2', request.url))
  }

  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
  }
}

Summary

• In Next.js 12 and above, use a single middleware file in the root folder of your project.
• Avoid using the "_" prefix in the middleware file name.
• Middleware can no longer produce a response body for security reasons.

This new approach to middleware in Next.js offers a more structured and secure way to handle request processing in your applications.