Next-auth开发环境下登录尝试后出现404错误

以下是针对该问题的排查和解决方向：

• 检查API路由配置
  确认Next-auth的API路由文件路径和命名完全正确：

  • 若使用App Router，必须存在app/api/auth/[...nextauth]/route.ts，且文件中需同时导出GET和POST方法：

    import NextAuth from "next-auth";
    import CredentialsProvider from "next-auth/providers/credentials";
    
    const handler = NextAuth({
      providers: [
        CredentialsProvider({
          name: "Credentials",
          credentials: {
            email: { label: "Email", type: "email" },
            password: { label: "Password", type: "password" }
          },
          async authorize(credentials) {
            // 自定义验证逻辑示例
            const user = { id: "1", name: "Test", email: "test@example.com" };
            return user;
          }
        })
      ],
      secret: process.env.NEXTAUTH_SECRET,
    });
    
    export { handler as GET, handler as POST };
    

  • 若使用Pages Router，需存在pages/api/auth/[...nextauth].ts，导出默认handler即可。

• 验证环境变量配置
  在.env.local中确认NEXTAUTH_URL设置正确，开发环境一般为：

  NEXTAUTH_URL=http://localhost:3000
  

  该变量直接影响登录回调地址的生成，路径错误会导致跳转404。

• 检查登录回调路径
  调用signIn方法时，若指定了callbackUrl，确保该路径对应存在的页面（比如signIn("credentials", { callbackUrl: "/" })）；未指定时，Next-auth默认跳转至登录前的页面，需确认该页面路由有效。

• 排查App Router路由规则
  若使用Next.js 13 App Router，页面文件需放在app目录下（如app/page.tsx为首页），文件名和目录结构不能有拼写错误；动态路由需确保参数匹配逻辑正确，避免跳转后找不到对应页面。

• 确认Next-auth核心配置

  • 必须在环境变量中设置NEXTAUTH_SECRET，开发环境可通过openssl rand -hex 32生成随机值。
  • 若自定义了pages配置项（如pages: { signIn: "/login" }），需确保/login页面存在且配置正确的登录表单。

• 清理缓存重启服务
  执行npm run dev -- --clear-cache或删除.next文件夹后重启开发服务，清除可能存在的路由缓存异常。

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