Next.js生产环境使用next-auth登录时报TypeError [ERR_INVALID_URL]错误

生产环境中NEXTAUTH_URL环境变量未被正确读取，导致next-auth生成回调URL时拼接出undefined/home这种无效地址，触发ERR_INVALID_URL错误。开发模式正常是因为Next.js默认会加载.env.local，但生产模式不会自动加载该文件。

1. 使用生产环境专用环境变量文件 #

创建.env.production文件，将NEXTAUTH_SECRET和NEXTAUTH_URL移入（注意去掉变量值的引号，.env文件不需要引号包裹）：

NEXTAUTH_SECRET=SomeLongString
NEXTAUTH_URL=http://localhost:3000

Next.js执行next build和next start时会自动加载.env.production中的变量。

2. 手动指定加载.env.local（可选） #

如果不想新建文件，可修改package.json的start脚本，强制加载.env.local：

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "dotenv -e .env.local next start",
  "lint": "next lint"
}

需先安装依赖：

yarn add dotenv-cli --dev

3. 验证环境变量是否生效 #

在[...nextauth].ts开头添加日志，确认生产模式下变量读取情况：

console.log("NEXTAUTH_URL:", process.env.NEXTAUTH_URL);
console.log("NEXTAUTH_SECRET:", process.env.NEXTAUTH_SECRET);

执行yarn build && yarn start后查看终端输出，若显示undefined，需检查文件路径和变量格式。

4. 优化next-auth配置 #

去掉不必要的@ts-ignore，用类型断言确保变量类型合法：

GoogleProvider({
  clientId: process.env.GOOGLE_CLIENT_ID as string,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
})

内容的提问来源于stack exchange，提问作者Mathias Riis Sorensen