Middlewares | Nextjs

Middlewares | Nextjs

Note: This article is for personal reference — results may vary!

Middleware in Next.js is a powerful tool that allows developers to intercept, modify, and control the flow of requests and responses in their applications. Whether you’re building a server-rendered website or a full-fledged web application, understanding how to use Middleware effectively can significantly enhance the data flow in and out of your project. This guide will explore Middleware in Next.js, from the basics to advanced techniques.

Complete examples can be found in the associated Gist. You can find them here: https://gist.github.com/zachshallbetter.

Understanding Middleware
Getting Started with Middleware
Middleware in Next.js
Advanced Middleware Techniques
Middleware Upgrade Guide

1. Understanding Middleware

What is Middleware?

When building a site or application for the web, middleware is a valuable concept to understand. The quick version — Middleware provides a mechanism for intercepting and manipulating the various aspects of the request-response cycle. This mechanism consists of actions to manipulate incoming requests or outgoing responses and tailor them to your application’s needs.

Middleware applied to Next.js allows users to shape and control the behavior of their web applications at a granular level without the extra steps, that’s it.

Middleware’s job is to intercept and manipulate HTTP requests and responses as they pass through the application.

Now that we understand the fundamental concept, let’s explore the use cases I mentioned. We’ll use both Next.js 13 and Javascript.

Routing:

Routing control enables redirecting requests to different URLs handling on, or enforcing URL patterns. This is especially useful when managing complex routing scenarios in your application.

// Next.js
// Redirect requests from the old URL to the new one
export function redirectMiddleware(request: NextRequest) {
  return NextResponse.redirect('/new-url');
}

// Javascript
function redirectMiddleware(request) {
  // Redirect to the new URL
  window.location.href = '/new-url';
  // Return an empty response as this code won't execute after redirection
  return {
    status: 204, // No content
    body: '',
  };
}

Middleware can manage cookies in both incoming requests and outgoing responses. This is essential for tasks like setting user session cookies, reading cookies for authentication, or deleting cookies when a user logs out.

export function cookieManagementMiddleware(request: NextRequest) {
  const response = NextResponse.next();
  response.cookies.set('myCookie', '123');
  return response;
}

function cookieManagementMiddleware(request) {
  const response = {
    status: 200,
    cookies: {
      myCookie: '123',
    },
  };
  return response;
}

Authentication:

Middleware can check whether a user is authenticated before granting access to specific routes or resources.

In the example below, when users attempt to access a protected route, a Middleware function verifies their identity by checking for authentication via session cookies. If the user is not authenticated, they are redirected to a login page or denied access.

// Using Next.js
export function authenticationMiddleware(request: NextRequest) {
  if (!request.headers.cookie?.includes('authenticated=true')) {
    // Redirect to the login page
    return NextResponse.redirect('/login');
  }
  return NextResponse.next();
}

// Using Javascript
function authenticationMiddleware(request) {
  if (!(request.headers.cookie && request.headers.cookie.includes('authenticated=true'))) {
    // Redirect to the login page
    window.location.href = '/login';
    // Return an empty response as this code won't execute after redirection
    return {
      status: 204, // No content
      body: '',
    };
  }
  // Continue to the next middleware or route handler
  return {
    status: 200,
  };
}

Logging:

Detailed logging of incoming requests, including the request method, URL, headers, and timestamp information. These logs are invaluable for diagnosing issues, tracking user activity, and analyzing performance.

export function loggingMiddleware(request: NextRequest) {
  console.log(`Received ${request.method} request to ${request.url} at ${new Date()}`);
  retuTyern NextResponse.next();
}

function loggingMiddleware(request) {
  console.log(`Received ${request.method} request to ${request.url} at ${new Date()}`);
  return {
    status: 200, // Continue to the next middleware or route handler
  };
}

Response Customization:

Customized response headers, status codes, or the response content based on specific conditions. For instance, you might set custom headers to provide additional information to the client or adjust the response content dynamically.

export function customHeadersMiddleware(request: NextRequest) {
  const response = NextResponse.next();
  response.headers.set('X-Custom-Header', 'Hello, Middleware!');
  response.cookies.set('myCookie', '123');
  return response;
}

function customHeadersMiddleware(request) {
  const response = {
    status: 200,
    headers: {
      'X-Custom-Header': 'Hello, Middleware!',
    },
    cookies: {
      myCookie: '123',
    },
  };
  return response;
}

Now that we understand what Middleware is and why it’s useful, let’s start using it in Next.js.

2. Middleware in Next.js

The Middleware File

In Next.js, Middleware is defined in a file typically named middleware.ts (or .js) placed in the root of your project. This file is where you'll define your Middleware functions. Here's a basic example function:

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function myMiddleware(request: NextRequest) {
  // Your Middleware logic here
  return NextResponse.next(); // Pass control to the next Middleware or route handler
}

NextResponse API

NextResponse is an API in Next.js that allows you to work with responses in Middleware. It provides methods for redirecting requests, rewriting responses, setting headers, cookies, etc.

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

export function myMiddleware(request: NextRequest) {
  // Redirect the request to a different URL
  return NextResponse.redirect('/new-url');
  // Rewrite the response to display content from a different URL
  return NextResponse.rewrite('/new-content');
  // Set response headers and cookies
  const response = NextResponse.next();
  response.headers.set('X-Custom-Header', 'Hello, Middleware!');
  response.cookies.set('myCookie', '123');
  return response;
}

Matching Paths

3. Using Middleware in Next.js

Middleware functions in Next.js have access to both the incoming request and the response. You can modify these objects to tailor the behavior of your application.

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

export function authenticationMiddleware(request: NextRequest) {
  // Check if the user is authenticated
  if (!request.headers.cookie?.includes('authenticated=true')) {
    return NextResponse.redirect('/login');
  }
  return NextResponse.next(); // Continue to the next Middleware or route handler
}

Setting Headers and Cookies

Middleware can manipulate headers and cookies in both incoming requests and outgoing responses. This is useful for tasks like customizing the response or managing user sessions.

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

export function customHeadersMiddleware(request: NextRequest) {
  const response = NextResponse.next();
  response.headers.set('X-Custom-Header', 'Hello, Middleware!');
  response.cookies.set('myCookie', '123');
  return response;
}

Producing Custom Responses

Middleware can produce responses directly by returning a Response or NextResponse instance. This allows you to control the response sent to the client based on your custom logic.

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

export function customResponseMiddleware(request: NextRequest) {
  if (/* Some condition */) {
    return new Response('Custom error message', { status: 400 });
  }
  return NextResponse.next();
}

Now that we’ve covered the basics, let’s explore some advanced techniques for working with Middleware in Next.js.

4. Advanced Middleware Techniques

Intercepting API Calls

One robust use case for Middleware is intercepting API calls. You can use Middleware to modify API request headers, cache responses, or even mock API calls for testing.

Modifying Request Headers

You can use Middleware to modify the headers of outgoing API requests. This is often done to add authentication tokens, API keys, or other necessary information to the headers before sending the request.

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

export function apiInterceptorMiddleware(request: NextRequest) {
  // Modify the API request headers
  request.headers.set('Authorization', 'Bearer myAccessToken');

  // Cache API responses for improved performance
  // Implement caching logic here

  return NextResponse.next();
}

Caching API Responses

To improve the performance of your application, you can implement caching of API responses within Middleware. This helps reduce the load on external APIs and speeds up subsequent requests for the same data.

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

export function apiInterceptorMiddleware(request: NextRequest) {
  // Check if the response is already cached
  const cachedResponse = /* Implement caching logic here */;

  if (cachedResponse) {
    // If cached, return the cached response
    return cachedResponse;
  } else {
    // If not cached, make the API request and cache the response
    const apiResponse = /* Make the API request */;

    // Cache the response for future use
    /* Cache the response */

    return apiResponse;
  }
}

Mocking API Calls for Testing

Middleware can also be used to mock API calls during testing. This ensures that your tests are not dependent on external services, making them more reliable and faster.

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

export function apiMockMiddleware(request: NextRequest) {
  if (process.env.NODE_ENV === 'test') {
    // In a testing environment, return a mocked response
    return new Response(JSON.stringify({ mockData: true }), {
      status: 200,
      headers: {
        'Content-Type': 'application/json',
      },
    });
  } else {
    // In other environments, continue to the next Middleware or route handler
    return NextResponse.next();
  }
}

These advanced techniques illustrate Middleware's flexibility and power when handling API calls in your Next.js application. Whether you need to secure your API requests, optimize performance with caching, or simplify testing with mock responses, Middleware can be your go-to solution.

5. Middleware Upgrade Guide

If you have been using Middleware in earlier versions of Next.js and plan to upgrade to version 12.2 or later, you must be aware of changes and improvements made to the Middleware API. These changes might require you to update your existing Middleware code. Refer to the official Next.js documentation for detailed upgrade instructions.

This should cover fundamental concepts and advanced techniques to manage your web application’s request and response flow, authentication, logging, response customization, routing control, etc.

You can explore the official Next.js documentation on Middleware information and official examples.

Table of Contents

1. Understanding Middleware

What is Middleware?​

Routing:​

Cookie Management:​

Authentication:​

Logging:​

Response Customization:​

2. Middleware in Next.js

The Middleware File​

NextResponse API​

Matching Paths​