Approach Implementation

Encountering a similar challenge recently, I devised and executed the following approach:

src/middleware.ts

The script provided contains the essential imports and establishes the final middleware chain along with configuration settings.

import { middleware1 } from './middlewares/middleware1';
import { middleware2 } from './middlewares/middleware2';
import { middlewareHandler } from './middlewares/middlewareHandler';

export const middleware = middlewareHandler([middleware1, middleware2]);

export const config = {
  matcher: ['/((?!api|fonts|_next/static|_next/image|favicon.ico).*)'],
};

src/middlewares/middlewareHandler.ts

In this section, indispensable types and interfaces are imported. The function middlewareHandler links multiple middleware wrappers seamlessly.

import type { NextRequest, NextFetchEvent, NextResponse } from 'next/server';
import type { MiddlewareWrapperType, ChainMiddlewareType } from './middlewareTypes';

export function middlewareHandler(middlewares: Array<MiddlewareWrapperType>, i = 0): ChainMiddlewareType {
  const current = middlewares[i];

  if (current) {
    const next = middlewareHandler(middlewares, i + 1);

    return current(next);
  }

  return (_req: NextRequest, _evt: NextFetchEvent, res: NextResponse) => {
    return res;
  };
}

src/middlewares/middlewareTypes.ts

Create a fresh file for unified type definitions.

import type { NextFetchEvent, NextRequest } from 'next/server';
import { NextResponse } from 'next/server';
import type { NextMiddlewareResult } from 'next/dist/server/web/types';

export type MiddlewareWrapperType = (middleware: ChainMiddlewareType) => ChainMiddlewareType;

export type ChainMiddlewareType = (
  request: NextRequest,
  event: NextFetchEvent,
  response: NextResponse
) => NextMiddlewareResult | Promise<NextMiddlewareResult>;

src/middlewares/middleware1.ts

This segment introduces middleware1, which formulates a default NextResponse and transfers command to the subsequent middleware.

import type { NextRequest, NextFetchEvent } from 'next/server';
import { NextResponse } from 'next/server';
import type { MiddlewareWrapperType, ChainMiddlewareType } from './middlewareTypes';

export const middleware1: MiddlewareWrapperType = (next) => {
  return (req, evt) => {
    const res = NextResponse.next();

    return next(req, evt, res);
  };
};

src/middlewares/middleware2.ts

This file defines middleware2, which appends a personalized header to the response. Nevertheless, adjustments can be made in accordance with project requirements.

import type { MiddlewareWrapperType, ChainMiddlewareType } from './middlewareTypes';

export const middleware2: MiddlewareWrapperType = (next) => {
  return (req, evt, res) => {
    res.headers.set('x-middleware', 'custom header');

    return next(req, evt, res);
  };
};

Testing

src/middleware/middlewareHandler.test.ts

import type { NextFetchEvent } from 'next/server';
import { NextResponse } from 'next/server';
import { NextRequest } from 'next/server';
import type { MiddlewareWrapperType as MiddlewareWrapperType } from 'middleware/middlewareHandler';
import { middlewareHandler } from 'middleware/middlewareHandler';

describe('middlewareHandler', () => {
  const mockRequest = new Request('https://example.com');
  const mockFetchEvent = {} as NextFetchEvent;
  const mockNextRequest = new NextRequest(mockRequest);
  const mockResponse = new NextResponse();

  it('should engage each middleware in the chain precisely once', () => {
    const mockMiddleware1 = jest.fn((next) => next);
    const mockMiddleware2 = jest.fn((next) => next);
    const chained = middlewareHandler([mockMiddleware1, mockMiddleware2]);

    chained(mockNextRequest, mockFetchEvent, mockResponse);

    expect(mockMiddleware1).toHaveBeenCalledTimes(1);
    expect(mockMiddleware2).toHaveBeenCalledTimes(1);
  });

  it('should transfer authority to the subsequent middleware in the chain', async () => {
    const mockMiddleware1: MiddlewareWrapperType = jest.fn((next) => {
      return (req, evt, resp) => {
        return next(req, evt, resp);
      };
    });

    const mockMiddleware2: MiddlewareWrapperType = jest.fn(() => {
      return () => {
        return new NextResponse(JSON.stringify({ hello: 'world' }));
      };
    });

    const chained = middlewareHandler([mockMiddleware1, mockMiddleware2]);
    const result = await chained(mockNextRequest, mockFetchEvent, mockResponse);
    const json = await result?.json();

    expect(json).toEqual({ hello: 'world' });
  });

  it('should deliver the response in the absence of provided middleware', async () => {
    const chained = middlewareHandler([]);
    const result = await chained(mockNextRequest, mockFetchEvent, mockResponse);

    expect(result).toEqual(mockResponse);
  });

  it('should handle asynchronous middleware accurately', async () => {
    const asyncMiddleware: MiddlewareWrapperType = jest.fn((next) => {
      return async (req, evt, resp) => {
        await new Promise((resolve) => setTimeout(resolve, 100));
        return next(req, evt, resp);
      };
    });

    const mockMiddleware = jest.fn((next) => next);
    const chained = middlewareHandler([asyncMiddleware, mockMiddleware]);
    const time = performance.now();

    await chained(mockNextRequest, mockFetchEvent, mockResponse);

    expect(performance.now() - time).toBeGreaterThanOrEqual(100);
    expect(asyncMiddleware).toHaveBeenCalledTimes(1);
    expect(mockMiddleware).toHaveBeenCalledTimes(1);
  });
});

Note: Credit to Hamed Bahram for influencing my solution.