NextAuth部署Vercel遇504错误及CLIENT_FETCH_ERROR求助

针对你遇到的本地正常、Vercel部署后/api/auth/session返回504并导致JSON解析错误的问题，结合Next.js 13.4.4和NextAuth 4.22.1的特性，可按以下步骤排查解决：

1. 查看Vercel函数日志定位超时原因 #

Vercel的Serverless Function默认超时上限为30秒，你的请求刚好在30秒后返回504，说明函数执行耗时触达上限：

• 登录Vercel控制台，进入项目的「Functions」面板，找到/api/auth/session对应的函数
• 查看函数执行日志，重点关注：
  • 是否存在MongoDB连接超时或查询缓慢的报错
  • NextAuth的session/jwt等回调函数是否有阻塞操作
  • 环境变量是否在函数运行时正确加载

2. 优化NextAuth的Session策略 #

如果当前使用database会话策略，每次请求/api/auth/session都会查询数据库，容易因数据库延迟导致超时：

• 切换为jwt策略（NextAuth默认策略），修改[...nextauth].js/ts配置：

  export default NextAuth({
    session: {
      strategy: "jwt", // 改用JWT策略，无需每次查询数据库
    },
    // 其他配置...
  });
  

• 检查session回调函数，避免在其中执行耗时的数据库查询或外部请求，必要时将用户信息提前存入JWT中

3. 验证MongoDB连接配置 #

即使服务器同区域，仍可能存在连接问题：

• 确认MongoDB Atlas的IP白名单设置为允许所有IP（0.0.0.0/0），Vercel的Serverless Function使用动态IP，无法固定添加
• 检查MongoDB连接字符串是否正确，尤其是密码中的特殊字符是否已URL转义（比如@要转义为%40）
• 尝试在连接字符串中添加connectTimeoutMS=3000参数，缩短连接超时时间，避免函数被长时间阻塞

4. 修正环境变量配置 #

确保Vercel上的环境变量符合NextAuth要求：

• NEXTAUTH_URL直接设置为你的网站域名（https://mug-e-commerce-project.vercel.app）
• NEXTAUTH_URL_INTERNAL可设置为Vercel自动注入的${VERCEL_URL}环境变量
• 确认NEXTAUTH_SECRET是随机生成的字符串（可通过openssl rand -hex 32生成），且本地与Vercel配置一致

5. 改用Vercel Edge Functions #

Edge Functions响应速度更快，适合轻量的Auth请求：

• 在[...nextauth].js/ts顶部添加Edge Runtime声明：

  export const runtime = "edge";
  

• 注意：Edge Runtime不支持部分Node.js API，需确保NextAuth的适配器、回调函数中没有使用不兼容的API（比如fs、child_process等）

6. 本地模拟Vercel环境复现问题 #

使用Vercel CLI在本地模拟部署环境，更容易定位差异：

• 安装Vercel CLI：npm i -g vercel
• 运行本地模拟：vercel dev
• 此时访问http://localhost:3000/api/auth/session，如果复现超时问题，可直接在本地调试排查

内容的提问来源于stack exchange，提问作者Lin Kai Yee