Next.js+NextAuth自定义登录页遇重定向循环问题求助

核心配置错误 #

1. middleware.ts 配置完全错误
   NextAuth 中间件的 config 对象根本不需要 pages 字段，你在这里多余配置了登录页路径。而且单独导出的 pages 对象完全没用，NextAuth 不会读取这个。更关键的是，你没排除登录页受中间件保护，导致未登录时访问 /login 会被中间件强制重定向到登录页，直接形成死循环。

2. [...nextauth].ts 配置没问题
   这里的 pages.signIn 配置是正确的，NextAuth 会从这里读取自定义登录页路径，不用改。

修复步骤 #

1. 彻底修正 middleware.ts #

删掉无效的配置，只保留正确的路由匹配规则，明确排除登录页和 NextAuth 的 API 路径：

// src/middleware.ts
export { default } from "next-auth/middleware"

// 只配置需要受保护的路由，排除登录页和auth API
export const config = {
  matcher: [
    "/((?!login|api/auth).*)",
  ],
}

2. 保留[...nextauth].ts中的正确配置 #

这个文件里的登录页配置是对的，继续用：

// src/pages/api/auth/[...nextauth].ts
import NextAuth from 'next-auth'
import { NextAuthOptions } from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'

export const authOptions: NextAuthOptions = {
  pages: {
    signIn: '/login', // 这个配置正确，保留
  },
  providers: [
    CredentialsProvider({
      // 你的凭据验证逻辑（用户名密码校验等）
    })
  ],
  // 其他必要配置（比如session策略等）
}
export default NextAuth(authOptions)

调试技巧 #

• 抓重定向请求链：打开Chrome控制台的Network标签，勾选「Preserve log」，触发重定向后看请求的跳转顺序，确认是不是登录页被反复重定向。
• 加中间件日志：临时修改middleware.ts，打印请求路径，确认中间件是否正确跳过了登录页：

  // src/middleware.ts
  import { NextResponse } from 'next/server'
  import nextAuthMiddleware from "next-auth/middleware"
  
  export default function customMiddleware(req) {
    console.log('当前请求路径:', req.nextUrl.pathname)
    // 登录页直接放行
    if (req.nextUrl.pathname === '/login') {
      return NextResponse.next()
    }
    return nextAuthMiddleware(req)
  }
  
  export const config = {
    matcher: ["/((?!api/auth).*)"],
  }
  

• 检查会话状态：在登录页用 useSession()（客户端组件）或在API路由用 getServerSession(authOptions) 打印会话信息，确认登录后会话是否正常生成，未登录时是否正确返回null。

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