Next.js预构建脚本无法读取环境变量的技术问题求助

问题原因 #

你使用create-next-app v13.4.19（App Router）创建的项目，在next build前通过tsx运行src/app/scripts/fetch-music.js时，脚本调用的src/app/api/spotify.js无法读取.env.local里的SECRET环境变量，导致Spotify API调用失败。但将逻辑移到page.js里就能正常获取，核心原因是：

• Next.js在运行自身服务（dev/build/start）时，会自动加载.env.local等环境变量文件
• 直接用tsx运行独立脚本时，Node.js默认不会自动加载这些.env文件，因此process.env.SECRET返回undefined

解决方法 #

方法1：用dotenv手动加载环境变量

• 安装dotenv开发依赖：

  npm install dotenv --save-dev
  

• 在fetch-music.js的最顶部添加代码，手动指定加载.env.local：

  // CommonJS语法
  require('dotenv').config({ path: '.env.local' });
  
  // 若使用ES模块语法
  // import dotenv from 'dotenv';
  // dotenv.config({ path: '.env.local' });
  

• 重新运行npm run music即可正常读取环境变量

方法2：用Next.js的next exec运行脚本

Next.js提供的next exec命令，可让脚本在Next.js的环境上下文里执行，自动加载所有配置的环境变量，无需额外安装依赖：

• 修改package.json中的music脚本：

  {
    "scripts": {
      "dev": "next dev",
      "build": "npm run music && next build",
      "start": "next start",
      "lint": "next lint",
      "music": "next exec src/app/scripts/fetch-music.js",
      "env-var": "vercel env pull .env.local"
    }
  }
  

• 运行npm run music时，脚本会自动继承Next.js的环境变量加载逻辑，直接读取.env.local中的SECRET

生产环境注意事项 #

• 在Vercel等部署平台，需在控制台配置好对应环境变量，平台会自动在构建阶段注入
• 本地生产构建前，确保.env.local文件存在且包含正确的SECRET值（可通过npm run env-var拉取）

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