A Beginner's Guide to Middleware in Next.js

Next.js is a popular React framework that simplifies building modern web applications. One of its powerful features is Middleware, which allows you to execute custom logic before a request is completed. Let’s break down what Middleware is, how it works, and the practical use cases it can solve.

What is Middleware in Next.js?

Middleware in Next.js allows you to intercept incoming requests and execute custom logic before routing occurs. Think of it like a security checkpoint for your web app: you can decide what happens to each request.

For example:

• Redirect users who are not logged in.

• Modify headers for security.

• Rewrite URLs dynamically for SEO.

• Handle requests based on location or device.

Here’s an example of simple middleware:

import { NextResponse } from 'next/server';

export function middleware(request) { 
    const url = request.nextUrl.clone(); 
    if (!url.pathname.startsWith('/dashboard')) { 
         return NextResponse.redirect(new URL('/login', request.url)); 
    } 
    return NextResponse.next(); 
}

This example redirects users to the login page if they are trying to access routes outside /dashboard.

How Middleware Works?

Middleware runs before the request reaches the actual route. It is deployed at the edge of the network (close to users), allowing it to perform actions like redirects and rewrites quickly, with minimal delay.

Middleware Flow:

1. Client sends a request.

2. Middleware intercepts the request and applies logic (e.g., redirection, headers, URL rewriting).

3. Edge Network or Static Content is served to the client.

Middleware response time is usually 10-50ms, making it ideal for fast request handling.

Adding Middleware to Specific Routes

You don’t always need middleware for every route. You can limit it to specific routes using the matcher option in next.config.js.

Here’s how you do it:

module.exports = {
   experimental: { 
       middleware: { 
          matcher: ['/dashboard/:path*'], // Runs only on dashboard routes 
       }, 
  }, 
};

This improves performance by running middleware only where it’s needed.

Use Cases of Middleware

1. Handling Custom Headers

You can dynamically set or modify request and response headers using middleware. This is useful for:

• Adding security headers.

• Implementing analytics tracking.

Example:

export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set('X-Custom-Header', 'MyValue');
  return response;
}

2. Dynamic URL Rewrites

Middleware allows you to rewrite URLs without changing the client-side route. This is particularly useful for:

• SEO-friendly URLs.

• Managing legacy URLs.

Example:

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

In this example, requests to /old-route are rewritten to /new-route without the user noticing.

3. Combining Middleware with Edge Functions

Middleware runs at the edge (close to the user), making it ideal for real-time personalization. You can handle requests differently based on the user’s location or device.

Example:

export async function middleware(request) {
  const geo = request.geo; // Geolocation data
  console.log(`Request from ${geo.city}, ${geo.country}`);
  return NextResponse.next();
}

This is perfect for showing location-based content or tracking user requests.

Benefits of Using Middleware

1. Performance: Middleware runs close to users, reducing latency.

2. Customization: You can tailor request handling logic as needed.

3. SEO-Friendly: Rewrite URLs to improve SEO without changing client routes.

4. Security: Add headers, perform authentication checks, and log requests.

5. Real-Time Handling: Handle requests based on location, devices, or custom logic.

Conclusion

Middleware in Next.js is a powerful tool that can help you implement:

• Custom logic before routing.

• Dynamic rewrites, redirection, and personalization.

• Efficient header management and route scoping.

Whether you want to improve security, optimize performance, or customize responses, Middleware enables you to handle requests like a pro!

If you’re building a Next.js app, give Middleware a try. It’s simple, fast, and incredibly useful!