Next.js如何从上级目录的../.env加载环境变量？

方法1：通过next.config.js手动加载 #

1. 在main/目录下安装dotenv依赖：
   npm install dotenv --save-dev

2. 编辑main/next.config.js，添加.env文件的加载逻辑：

const dotenv = require('dotenv');
const path = require('path');

// 加载上级目录的.env文件
dotenv.config({ path: path.join(__dirname, '../.env') });

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 保留你原有的Next.js配置
}

module.exports = nextConfig;

不管是开发环境next dev还是生产环境next start，Next.js都会优先加载上级目录的.env文件。

方法2：修改启动脚本指定.env路径 #

在main/package.json里修改启动命令，直接指定.env文件的位置：

{
  "scripts": {
    "start": "ENV_FILE=../.env next start",
    "dev": "ENV_FILE=../.env next dev"
  }
}

之后在main/目录下运行npm run start或npm run dev即可。

如果是Windows系统，cmd命令行不支持ENV_FILE=xxx的写法，需要先安装cross-env统一兼容：
npm install cross-env --save-dev
再修改脚本：

{
  "scripts": {
    "start": "cross-env ENV_FILE=../.env next start",
    "dev": "cross-env ENV_FILE=../.env next dev"
  }
}

方法3：启动时直接通过node参数加载 #

不需要修改任何配置文件，直接用以下命令启动Next.js：
cd main && node -r dotenv/config node_modules/.bin/next start dotenv_config_path=../.env
这个命令通过node的-r参数预加载dotenv模块，并指定上级目录的.env文件路径，适合临时测试或者不想改动配置的场景。

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