页面加载即触发NextAuth Client Fetch Error的原因排查

问题核心诊断 #

你遇到的CLIENT_FETCH_ERROR和JSON解析错误，本质是请求/api/auth/session等接口时，服务器返回404 HTML页面而非预期的JSON数据，说明NextAuth的API路由未被正确注册，导致所有认证相关请求无法匹配到处理逻辑。

解决步骤 #

• 修正NextAuth路由文件路径
  在Next.js 13+ App Router架构下，NextAuth配置文件必须放在app/api/auth/[...nextauth]/route.js（TypeScript项目用route.ts）。若文件路径错误（比如直接放在app/api/auth/route.js），Next.js无法识别动态路由规则，会直接返回404页面。
  正确的文件结构应为：

  app/
    api/
      auth/
        [...nextauth]/
          route.js
  

  你的配置代码本身无问题，仅需移动到正确路径即可。

• 验证环境变量配置
  检查.env.local文件中的变量是否准确：

  GOOGLE_ID=你的Google客户端ID
  GOOGLE_SECRET=你的Google客户端密钥
  NEXTAUTH_URL=http://localhost:3000
  

  注意变量名大小写敏感，不要添加多余引号或空格。修改环境变量后必须重启开发服务器，否则新配置不会生效。

• 确认版本兼容性
  确保安装稳定版NextAuth v4：npm install next-auth，同时你的Next.js版本需支持App Router（推荐13.4及以上版本）。

• 复查Google Cloud回调地址
  再次确认Google Cloud控制台中OAuth 2.0客户端的回调地址是http://localhost:3000/api/auth/callback/google，无拼写错误或多余斜杠，且客户端类型为“Web应用”。

额外排查步骤 #

若以上操作后问题仍存在，可尝试：

• 清除浏览器缓存和Cookie，避免旧认证会话干扰。
• 执行npm run build构建生产版本，再用npm run start启动服务测试，排查是否为开发服务器缓存导致的问题。

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