如何在Next.js中整合NextAuth中间件与自定义中间件

正确整合方案 #

将两个中间件逻辑合并到同一个middleware.ts文件中，确保认证逻辑的响应被正确返回，代码如下：

import { NextRequest, NextResponse } from "next/server";
import nextAuthMiddleware from "next-auth/middleware";

export default async function combinedMiddleware(req: NextRequest) {
  // 执行自定义跟踪逻辑
  if (req.nextUrl.pathname === '/') {
    console.log('TRACK!');
  }

  // 调用Next-Auth认证中间件并返回其响应
  const authResponse = await nextAuthMiddleware(req);
  // 若认证中间件未返回响应（如路径不在保护列表），则继续请求流程
  return authResponse || NextResponse.next();
}

// 统一配置所有需要触发中间件的路径
export const config = {
  matcher: [
    '/',
    "/dashboard/:path*",
    "/admin/:path*",
    "/users/:path*",
    "/main/:path*",
    "/editCv/:path*",
    "/cv/:path*"
  ]
};

方案说明 #

1. 唯一默认导出：Next.js仅识别单个默认导出的中间件函数，因此必须将所有逻辑整合到一个函数内。
2. 返回认证响应：Next-Auth的中间件会在用户未认证时返回重定向响应，必须将这个响应返回，否则认证拦截逻辑不会生效。
3. 统一路径匹配：所有需要触发中间件的路径（包括跟踪用的根路径、认证保护的路由）都放在config.matcher中，避免重复配置冲突。

之前尝试的错误分析 #

1. 第一次尝试：仅执行自定义逻辑并返回NextResponse.next()，完全未调用Next-Auth中间件，导致认证逻辑未触发。额外导出的NextAuthMiddleware不会被Next.js识别。
2. 第二次尝试：调用了Next-Auth中间件但未返回其响应，认证重定向等核心逻辑无法生效；同时导出matcher和config，Next.js仅读取config，多余的matcher配置无效。
3. 第三次尝试：同时导出两个默认函数，后一个自定义函数覆盖了Next-Auth的中间件导出，导致认证功能失效。

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