在构建中大型的 Next.js 应用时，我们往往需要在请求进入应用之前做一些预处理，比如用户认证、国际化设置、重定向等。Next.js 从 12 版本开始支持 Middleware，它运行于边缘节点，可以在请求到达页面组件之前拦截和处理请求。
本文将逐步讲解如何在 Next.js 中实现多个中间件的逻辑，并且保持代码的清晰与模块化。
一、Middleware 的基础概念
在 Next.js 中，你只需要在项目根目录创建一个名为 middleware.ts 或 middleware.js 的文件即可启用 Middleware。这个文件会自动被 Next.js 识别，不需要额外配置。
一个最基础的中间件看起来如下：
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
return NextResponse.next();
}
该中间件会对所有请求生效，并简单地允许请求继续往下走。
二、实现多个中间件逻辑的需求
假设我们现在有两个独立的功能需要处理：
authMiddleware: 用于判断用户是否登录，未登录则重定向到 /logini18nMiddleware: 用于设置用户语言偏好
我们希望它们都在每个请求前依次执行。如何做到这点呢？
三、模块化中间件逻辑
为了保持代码整洁，我们将每个功能模块拆分到单独文件中：
middlewares/authMiddleware.ts
import { NextRequest, NextResponse } from 'next/server';
export function authMiddleware(request: NextRequest): NextResponse | void {
const isAuthenticated = true; // 示例逻辑
if (!isAuthenticated) {
return NextResponse.redirect(new URL('/login', request.url));
}
}
middlewares/i18nMiddleware.ts
import { NextRequest, NextResponse } from 'next/server';
export function i18nMiddleware(request: NextRequest): NextResponse | void {
const locale = request.headers.get('accept-language')?.split(',')[0] || 'en';
request.headers.set('x-locale', locale);
}
四、在 middleware.ts 中组合这些中间件
// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { authMiddleware } from './middlewares/authMiddleware';
import { i18nMiddleware } from './middlewares/i18nMiddleware';
export function middleware(request: NextRequest): NextResponse {
const authResponse = authMiddleware(request);
if (authResponse) return authResponse;
const i18nResponse = i18nMiddleware(request);
if (i18nResponse) return i18nResponse;
return NextResponse.next();
}
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};
我们依次执行每一个中间件函数：
- 如果某个中间件返回了
NextResponse，表示它希望拦截或终止请求流程，例如重定向； - 如果返回
undefined，表示它只是修改了请求状态或头部，不影响流程，继续执行下一个。
这种模式非常直观，也方便调试和扩展。
五、为什么使用 return 会中止后续中间件？
很多开发者初看可能会疑惑：
"既然我要执行多个中间件，为什么用 return 会跳过后面的逻辑？"
这是因为我们在实现“链式中间件”的处理逻辑——每个中间件有权决定是否终止请求流程。
举例来说，用户未认证时我们希望立即重定向到 /login，那么其他逻辑（比如设置语言、加载用户数据）就不需要再执行。
这种设计思路与很多后端框架如 Express.js 的中间件模型类似。
六、总结
Next.js 的 Middleware 是一个强大且灵活的工具，允许你在请求生命周期的早期阶段拦截和处理逻辑。
- 你只需一个
middleware.ts 文件 - 将每个中间件功能模块化，方便复用与测试
- 在主中间件函数中按顺序调用它们，并根据是否返回
NextResponse 控制流程
这样的设计既保持了结构的清晰，又便于日后扩展。如果你在构建应用时需要实现用户权限、国际化、AB 测试等功能，Middleware 是一个值得深入使用的机制。
希望本文对你理解和使用 Next.js Middleware 有所帮助！