NextJS13（App目录）部署Vercel时NextAuth Google登录跳转异常

• 手动指定NEXTAUTH_URL环境变量：
  不要依赖Vercel的VERCEL_URL自动填充，直接在Vercel项目的环境变量里添加NEXTAUTH_URL，值填你的部署域名（比如https://your-project.vercel.app），设置为Production环境后重新部署。

• 检查Auth路由文件路径与代码：
  确保NextAuth的路由文件放在app/api/auth/[...nextauth]/route.ts，代码导出正确的GET/POST handler，示例：

  import NextAuth from "next-auth"
  import GoogleProvider from "next-auth/providers/google"
  
  const handler = NextAuth({
    providers: [
      GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID!,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
      }),
    ],
  })
  
  export { handler as GET, handler as POST }
  

• 确保环境变量生效：
  检查GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET这些变量是否在Vercel的Production环境中正确设置，且修改后重新部署了项目——有时候环境变量更新后不重新部署不会生效。

• 使用官方signIn方法生成登录链接：
  客户端组件里不要手动拼接登录URL，用NextAuth提供的signIn方法，示例：

  import { signIn } from "next-auth/react"
  
  export default function LoginBtn() {
    return <button onClick={() => signIn("google")}>使用Google登录</button>
  }
  

  这个方法会自动处理正确的域名和路由，避免手动拼接出现undefined的问题。

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