Mac下VSCode终端Next.js项目环境变量加载异常求助

排查修复步骤 #

1. 确认VSCode工作目录正确 #

VSCode终端的工作路径以当前打开的文件夹为准，如果没打开项目根目录，.env文件不会被Next.js识别。

• 查看左侧资源管理器，确保根目录下存在.env文件；如果没有，重新通过文件>打开文件夹选择项目根目录。

2. 配置VSCode终端为登录shell #

Mac上VSCode默认启动的shell可能未加载完整配置，影响环境变量读取逻辑：

• 按Cmd+,打开设置，搜索Terminal > Integrated > Profiles: Osx
• 找到zsh配置项，勾选Run as login shell，重启VSCode终端后再执行npm run dev

3. 清除Next.js缓存 #

缓存可能保留旧的空变量值，导致新变量无法生效：

• 停止当前dev服务，执行以下命令清除缓存并重启服务：

  rm -rf .next/ && npm run dev
  

• 或者直接使用Next.js内置的清缓存命令：

  npm run dev -- --clean
  

4. 检查.env文件格式 #

确保文件没有语法错误：

• 变量名和值之间不要添加空格（正确格式：GITHUB_ID=Iv23lixxx，错误格式：GITHUB_ID = xxx）
• 值不需要额外加引号（除非包含特殊字符）
• 删除多余的无效注释或空行

5. 彻底重启VSCode #

VSCode进程缓存可能导致环境变量读取异常：

• 完全关闭VSCode（包括后台运行的进程），重新打开项目后启动终端运行npm run dev

验证方法 #

保留next.config.js中的日志代码，运行npm run dev后查看终端输出，确认GITHUB_ID等变量是否正常显示。也可以在VSCode终端中直接查看.env内容，确认文件存在且内容正确：

cat .env

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