Next14 App Router中i18n与Auth中间件堆叠失效问题求助

核心原因 #

当i18n中间件和Auth.js中间件组合使用时，没有通过链式调用正确传递完整的Request对象，导致i18n中间件接收到的request被异常处理，丢失了nextUrl等关键属性。

正确的中间件链式写法 #

你需要把两个中间件封装成链式调用，确保每个中间件都能拿到完整的请求和响应对象。修改根目录下的middleware.ts：

import { authMiddleware } from "@auth/nextjs";
import { localeMiddleware } from "./localeMiddleware";

export default function middleware(request: Request) {
  // 先执行i18n中间件，处理完多语言逻辑后再传给Auth中间件
  const i18nResult = localeMiddleware(request);
  // 如果i18n中间件返回了响应（比如重定向），直接返回该响应
  if (i18nResult instanceof Response) return i18nResult;
  
  // 再执行Auth中间件，传入处理后的请求对象
  return authMiddleware(request);
}

// 统一配置全局匹配规则，避免多中间件规则冲突
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

如果需要Auth认证优先执行，把顺序反过来即可：

export default function middleware(request: Request) {
  const authResult = authMiddleware(request);
  if (authResult instanceof Response) return authResult;
  
  return localeMiddleware(request);
}

验证中间件正常工作的方法 #

• 打印关键参数：在每个中间件内部添加console.log(request.nextUrl)、console.log(request.headers)，确认属性存在且值正确
• 实际路由测试：
  • 访问带多语言标识的路由（比如/en/about），检查URL是否符合预期，页面语言是否切换
  • 访问需要登录的路由，检查是否能正常跳转到登录页，登录后能否正常访问目标页面
• 查看终端日志：启动项目时观察终端输出，是否有中间件执行的报错或异常信息
• 断点调试：在VS Code中给中间代码打断点，逐步查看request对象的结构和属性变化

额外注意事项 #

• 不要在多个中间件文件中重复配置matcher，统一在根middleware.ts中配置全局规则，避免拦截逻辑冲突
• 确保i18n中间件的写法符合Next.js规范：接收Request参数，返回Response | undefined

内容的提问来源于stack exchange，提问作者xXnikosXx