This content originally appeared on DEV Community and was authored by Elliot Sutton
📌 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*'],
};
🎯 Why Use Next MW?
- ✅ Full modularity → Each middleware remains independent.
- ✅ Sequential execution → Maintains a controlled execution order.
- ✅ Fully compatible with Next.js → Uses the native system.
- ✅ Easy integration → No hacks or complex setups required.
- ✅ Works with both App and Pages directories → Universal compatibility.
With Next MW, middleware management becomes cleaner, more flexible, and easier to maintain.
📌 Useful Links
📦 NPM Package
🖥️ GitHub Repository
🌍 Documentation & Website
Try Next MW today and simplify your Next.js middleware management! 🚀
🗨️ Your Feedback Matters!
Do you use multiple middlewares in your Next.js project? Would Next MW help you? Share your experience in the comments! 💬
This content originally appeared on DEV Community and was authored by Elliot Sutton
Elliot Sutton | Sciencx (2025-02-18T20:46:13+00:00) 🚀 A Better Way to Manage Middlewares in Next.js. Retrieved from https://www.scien.cx/2025/02/18/%f0%9f%9a%80-a-better-way-to-manage-middlewares-in-next-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.