Next.js 14中如何组合next-auth与next-i18n-router中间件？

问题场景 #

开发应用时需同时实现基于NextAuth的身份验证和next-i18n-router的国际化路由，尝试直接组合两者中间件后无法正常工作，需正确的合并方式。

原NextAuth中间件代码：

import { auth } from "utils/auth";

export default auth;

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"]
};

原next-i18n-router中间件代码：

import { i18nRouter } from 'next-i18n-router';
import i18nConfig from './i18nConfig';

export function middleware(request) {
  return i18nRouter(request, i18nConfig);
}

export const config = {
  matcher: '/((?!api|static|.*\\..*|_next).*)'
};

错误尝试：

const middleware = auth((req) => i18nRouter(req, i18nConfig));

export default middleware

正确组合实现 #

Next.js 仅允许导出一个中间件函数，需将两者逻辑合并，确保先完成国际化路由处理，再执行身份验证：

import { auth } from "utils/auth";
import { i18nRouter } from 'next-i18n-router';
import i18nConfig from './i18nConfig';

export default function middleware(request) {
  // 优先处理国际化路由重定向
  const i18nResult = i18nRouter(request, i18nConfig);
  // 若i18nRouter返回重定向响应，直接返回该响应
  if (i18nResult) return i18nResult;

  // 执行NextAuth身份验证逻辑
  return auth(request);
}

// 合并两者的matcher规则，排除无需处理的路径
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|static|.*\\..*).*)"]
};

关键说明 #

1. 执行顺序：先处理国际化路由，确保后续身份验证基于正确的国际化路径执行，避免因路由重定向导致的验证逻辑异常。
2. 响应处理：i18nRouter在需要重定向时会返回响应对象，需优先返回该响应，避免进入身份验证流程。
3. Matcher规则：合并两个中间件的排除路径，减少不必要的中间件执行开销。

内容的提问来源于stack exchange，提问作者Pierre Olivier Tran