Next.js 13部署Vercel后callback URL始终指向localhost问题求助

排查与修复步骤 #

• 确认环境变量配置
  在Vercel项目设置的环境变量中，将NEXTAUTH_URL设为https://best-planning.vercel.app（不要加末尾斜杠），保存后触发一次重新部署，确保变量完全生效。

• 清除浏览器Cookie与缓存
  手动删除浏览器中next-auth.callback-url这个Cookie，关闭网页后重新访问，测试登录链接的callbackUrl是否正常。

• 检查NextAuth配置文件
  打开app/api/auth/[...nextauth]/route.js（或pages目录下对应文件），确保配置中没有硬编码localhost的逻辑：

  import NextAuth from "next-auth"
  import { authOptions } from "./options"
  
  export const authOptions = {
    providers: [
      // 你的登录提供商配置
    ],
    secret: process.env.NEXTAUTH_SECRET,
    callbacks: {
      redirect({ url, baseUrl }) {
        // 确保这里没有强制跳转localhost的逻辑，正常逻辑示例：
        if (url.startsWith(baseUrl)) return url
        return baseUrl
      },
    },
  }
  
  export default NextAuth(authOptions)
  

  重点检查redirect回调函数，避免错误的URL判断规则。

• 修正登录链接生成逻辑
  前端调用signIn函数时，不要硬编码localhost的callbackUrl，改用相对路径或让NextAuth自动处理：

  import { signIn } from "next-auth/react"
  
  // 正确用法：传入相对路径，或不指定让系统自动跳转
  signIn("credentials", { callbackUrl: "/dashboard" })
  

• 强制重新构建部署
  在Vercel部署设置中，勾选"Override the Build Command"，手动输入npm run build，强制重新构建项目，避免使用缓存的旧构建产物。

内容的提问来源于stack exchange，提问作者Hicham Zakroum