Next Auth V5无法访问/api/auth/providers问题求助

问题场景 #

跟着NextAuth V5教程学习，在Middleware & Login环节（对应教程2:09:45位置）遇到问题：无法访问localhost:3000//api/auth/providers。

现有代码 #

// 根目录下 route.ts
import { handlers } from "@/auth";
export const { GET, POST } = handlers;

// 根目录下 ./auth.ts
import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";

export const { auth, handlers, signIn, signOut } = NextAuth({
  providers: [GitHub, Google],
});

// app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth"
export const { GET, POST } = handlers

解决步骤 #

1. 修正请求地址 #

请求地址多了一个冗余斜杠，正确地址应为：localhost:3000/api/auth/providers

2. 验证文件路径与别名配置 #

• 确保auth.ts放在项目根目录（与app文件夹同级）
• 检查tsconfig.json的路径别名配置，确认@/*指向项目根目录：

  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
  

3. 确认NextAuth版本 #

打开package.json，确保next-auth是V5的beta版本，例如：

"dependencies": {
  "next-auth": "^5.0.0-beta.19"
}

V4与V5路由结构差异较大，版本不匹配会直接导致端点无法访问。

4. 重启开发服务器 #

修改路由或配置文件后，重启npm run dev或yarn dev，确保变更加载生效。

5. 排查错误日志 #

• 查看浏览器开发者工具控制台，获取请求的具体错误状态（如404、500）
• 查看终端中的Next.js运行日志，确认是否有代码报错或路由加载异常

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