Vercel自定义域名部署Next.js next-auth报CLIENT_FETCH_ERROR

问题特征 #

• 本地开发、Heroku平台部署时，基于next-auth实现的登录功能运行正常
• Vercel绑定自定义域名部署后，登录操作触发CLIENT_FETCH_ERROR报错
• 报错核心信息：请求/api/auth/session接口时返回内容无法解析为JSON，报错Unexpected token < in JSON at position 0

注意：该报错不是providers配置未正确读取导致，<开头的响应内容是典型的接口返回HTML页面（通常是404页、重定向页、服务端错误页）而非预期JSON响应的特征。

修复方案 #

按优先级依次排查以下配置项：

1. 修正NEXTAUTH_URL环境变量 #

next-auth的接口校验、cookie写入逻辑强依赖该参数，配置错误是Vercel自定义域名场景下该报错的最高发原因：

• 进入Vercel项目控制台 -> Settings -> Environment Variables
• 新增生产环境变量NEXTAUTH_URL，值填写你对外提供服务的自定义域名根地址：https://www.madrugonmayorista.co
• 不要填写Vercel自动生成的*.vercel.app临时域名，不要遗漏https协议前缀
• 配置完成后重新触发生产环境部署生效

2. 配置NEXTAUTH_SECRET环境变量 #

Vercel部署环境不会自动读取本地开发环境的默认密钥，缺少该参数会导致next-auth接口异常返回HTML错误页：

• 本地终端执行以下命令生成随机密钥串：

openssl rand -hex 32

• 将生成的32位十六进制字符串作为值，新增生产环境变量NEXTAUTH_SECRET
• 本地.env.local文件中同步配置该值，保证本地与线上配置一致
• 重新部署生产环境

3. 排查路由拦截与重定向规则 #

如果接口路径被重定向规则拦截，会导致请求被转发到前端HTML页面：

• 检查项目根目录next.config.js中的rewrites、redirects配置，确保没有规则拦截/api/auth/*开头的路径
• 检查域名解析、CDN配置，确保自定义域名没有额外的重定向规则拦截API路径
• 验证方式：直接在浏览器访问https://www.madrugonmayorista.co/api/auth/session，正常情况下会返回JSON格式响应（未登录状态返回{"user":null}），如果返回HTML页面则说明路径存在拦截或路由不存在问题

4. 校验NextAuth路由文件位置 #

路由文件放错目录会导致API接口不存在，Vercel默认返回404 HTML页面：

• Pages Router模式下，NextAuth配置文件必须放在pages/api/auth/[...nextauth].ts路径
• App Router模式下，NextAuth配置文件必须放在app/api/auth/[...nextauth]/route.ts路径

内容的提问来源于stack exchange，提问作者FELIX EDUARDO MIRANDA TERAN