🚀 A Better Way to Manage Middlewares in Next.js

#webdev #nextjs #react #typescript

📌 Why Rethink Middleware Management?

Next.js provides a simple and efficient middleware system, but it comes with a major limitation: there is only one middleware.ts file for the entire application.

⚠️ Limitations of Next.js Middleware

❌ A single global middleware → Impossible to have multiple independent middlewares.
❌ Growing complexity → All logic must be merged into a single file.
❌ Difficulties integrating some libraries → Hard to use multiple external middlewares without manual merging.

This is where Next MW comes in.

👉 Next MW is a lightweight and flexible library that allows you to compose multiple middlewares and execute them independently and sequentially, while maintaining full compatibility with Next.js.

Instead of struggling with a bloated middleware.ts file, you can define your middlewares separately and combine them cleanly.

✅ Next MW: Modular and Flexible Middleware Management

With Next MW, you can:

✅ Define multiple independent middlewares, each with its own configuration.
✅ Execute them sequentially, without hacks or workarounds.
✅ Maintain full compatibility with Next.js and its matchers.

🚀 Quick Installation

Install Next MW with your preferred package manager:

npm install next-mw
# or
yarn add next-mw
# or
pnpm add next-mw

🔔 Note: Requires Next.js >=13.1.0.

🛠️ Example Use Case

This example illustrates how Next MW allows you to organize multiple middlewares cleanly in a Next.js project by combining NextAuth v5 and next-intl.

📁 File Organization

Instead of keeping everything in middleware.ts, you can structure your files like this:

📂 middlewares
 ├── auth.ts         (NextAuth v5 middleware)
 ├── next-intl.ts    (next-intl middleware)
📄 middleware.ts

Then, in middleware.ts, simply compose them:

// middleware.ts
import { middlewares } from 'next-mw';

import * as nextIntl from './middlewares/next-intl';
import * as authMiddleware from './middlewares/auth';

export const middleware = middlewares(nextIntl, authMiddleware);

🏗️ Illustrative Middlewares

Here are two commonly used middlewares in a Next.js project, which Next MW allows you to neatly combine.

🔑 NextAuth v5 Middleware

// middlewares/auth.ts
import authConfig from '../auth.config';
import NextAuth from 'next-auth';

export const { auth: middleware } = NextAuth(authConfig);

🌍 next-intl Middleware

// middlewares/next-intl.ts
import createMiddleware from 'next-intl/middleware';
import { routing } from '../i18n/routing';

export const middleware = createMiddleware(routing);

export const config = {
  matcher: ['/', '/(fr|en)/:path*'],
};