@nimpl/middleware-chain

NPM GitHub

The package allows you to create a chain of native next.js middlewares without any modifications (i.e., you can add any ready-made middleware to the chain)

middleware.ts

export default chain([
    intlMiddleware,
    authMiddleware,
    customMiddleware,
]);

Installation

Using npm:

npm i @nimpl/middleware-chain

pnpm add @nimpl/middleware-chain

yarn add @nimpl/middleware-chain

bun add @nimpl/middleware-chain

How it works

The middleware-chain processes the passed middlewares in turn.

Each middleware is called with a modified original request argument. The only difference is the enrichment with a summary key with all accumulated data in the format:

interface Summary {
    type: NextType;
    destination?: string | NextURL;
    body?: ReadableStream<Uint8Array>;
    cookies: Map<string, ResponseCookie>;
    headers: Headers;
    status: number;
    statusText?: string;
}

The summary is readonly, i.e. it cannot be modified. All changes are made only through the native next.js API (by returning NextResponse with necessary additions).

Motivation

All existing solutions work through their own APIs - made under the style of express or in their own vision. They are useful, well implemented, and convenient. But only in cases where you can update every used middleware.

However, there are many situations where you need to add already prepared solutions. Usually, in the issues of these solutions, you can find “support to add a chain package A, working with chain package B”.

This package follows a plug and play format. In the best traditions of the previous next.js.

This is not Koa and not Express, this is a package for next.js, in its unique style, in the format of its API.

Usage

The chain takes an array of middleware. Upon request, it will sequentially process each middleware and return a NextResponse with the collected data (summary).

This could be a series of your custom middlewares:

middleware.ts

import { type NextRequest, NextResponse } from "next/server";
import { chain } from "@nimpl/middleware-chain";
 
export const middleware = chain([
    async (request: NextRequest) => {
        const next = NextResponse.next({ headers: new Headers({ "x-pathname": request.nextUrl.pathname }) });
        next.cookies.set("test", "cookie", { domain: "localhost", secure: true });
        return next;
    },
    async (request: NextRequest) => {
        return NextResponse.rewrite(new URL("/rewritten", request.url));
    },
]);

And a series of ready-made solutions:

middleware.ts

import { default as authMiddleware } from "next-auth/middleware";
import createMiddleware from "next-intl/middleware";
import { chain } from "@nimpl/middleware-chain";
 
const intlMiddleware = createMiddleware({
    locales: ["en", "dk"],
    defaultLocale: "en",
});
 
export default chain([
    intlMiddleware,
    authMiddleware,
]);

Important: NextResponse.rewrite, NextResponse.redirect, and NextResponse.json do not terminate the execution of the chain. If the subsequent middleware of the chain returns a new type - the chain will continue execution with new data. At the same time, a message of the following type will be output to the console: http://localhost:3000/ (none) -> http://localhost:3000/rewritten (rewrite)

This is done so that it is possible to pass several ready-made solutions (such as for example next-auth and next-intl)

You can stop the execution of the chain using FinalNextResponse.

Item Rules

In some situations, you may need to run certain chain middlewares only for specified paths.

In this situation, you can specify item rules. Simply change the item to an array and pass the rules as the second array item.

You can specify include and exclude rules:

export default chain([
    [intlMiddleware, { exclude: /^\/private(\/.*)?$/ }],
    () => {
        const next = new NextResponse();
        next.cookies.set("custom-cookie", Date.now().toString());
        return next;
    },
    [nextAuth, { include: /^\/private(\/.*)?$/ }],
]);

FinalNextResponse

If you wish, you can embed your middleware between the ready ones, where to stop further execution with the help of returning FinalNextResponse, for example if summary.type === 'redirect'

For instance, in the case with next-intl + next-auth, we may not want authorization handling until the redirect (because after the redirect, the middleware will be processed again):

middleware.ts

export default chain([
    intlMiddleware,
    (req) => {
        if (req.summary.type === "redirect") return FinalNextResponse.next();
    },
    authMiddleware,
]);

Configuration

Custom logger

By default, the package logs every change during the chain execution. This is important for understanding unnecessary changes or tracking the request processing.

You can modify this behavior by passing an object with the logger option as the second argument to the chain:

export default chain(
    [
        intlMiddleware,
        authMiddleware,
    ],
    {
        logger: Logger,
    }
);

To completely disable the package’s internal logs, pass logger: null or logger: false.

You can also pass a custom logger:

export default chain(
    [
        intlMiddleware,
        authMiddleware,
    ],
    {
        logger: {
            log: (msg) => console.log(`product-middleware-chain: ${msg}`),
            warn: (msg) => console.warn(`product-middleware-chain: ${msg}`),
            error: (msg) => console.error(`product-middleware-chain: ${msg}`),
        },,
    }
);

The option does not change the internal logs of chain elements, but only works for the package’s internal logs (e.g. Changing destination between middlewares...)

Examples

Development

Read about working on the package and making changes on the contribution page

Additional

Please consider giving a star if you like it, it shows that the package is useful and helps me continue work on this and other packages.

Create issues with wishes, ideas, difficulties, etc. All of them will definitely be considered and thought over.

classnames-minifier router