理解.env文件应用顺序（feat. NextJS）

常见的.env文件结构

大多数项目使用多个.env文件，针对不同的环境进行定制。

• .env: 所有环境中通用的基本环境变量
• .env.local: 仅在本地开发环境中使用（从版本控制中排除）
• .env.development: 在开发环境中使用
• .env.development.local: 开发环境的本地设置（从版本控制中排除）
• .env.production: 在生产环境中使用
• .env.production.local: 生产环境的本地设置（从版本控制中排除）
• .env.test: 在测试环境中使用

带有.local后缀的文件存储个人开发者设置，通常从版本控制中排除。

一般优先级顺序

通常，环境变量按以下顺序应用（可能因框架或库而异）：

1. 操作系统环境变量
2. .env.[环境].local
3. .env.[环境]
4. .env.local
5. .env

Next.js中的环境变量加载优先级

Next.js在加载环境变量时遵循明确的优先级：

1. .env.local: 最高优先级
2. .env.[MODE].local: 特定环境的本地设置
3. .env.[MODE]: 特定环境设置
4. .env: 默认设置

Next.js中的MODE值

Next.js中可用于[MODE]的值：

• production: 运行next start或next build时自动指定
• development: 运行next dev时自动指定
• test: 运行next test时自动指定

强制指定特定环境文件

如果你想在Next.js构建时使用非生产环境的变量，可以使用env-cmd库。

# 安装env-cmd
npm install env-cmd --save-dev

// package.json
"scripts": {
  "build:dev": "env-cmd -f .env.development.local next build"
}

# 执行
yarn build:dev

这种方法可以在以下情况下使用：

• 为暂存环境创建构建
• 使用开发环境设置执行测试构建
• 使用特定环境变量进行本地测试

注意事项

通用注意事项

• 将.local文件添加到.gitignore以从版本控制中排除
• 当多个文件中存在相同的变量名时，根据优先级确定值
• 敏感信息必须存储在.local文件中

Next.js特定注意事项

• 需要暴露给浏览器的环境变量需要NEXT_PUBLIC_前缀
• .env.test文件仅在测试执行期间加载
• 环境变量不能在运行时更改（在构建时确定）

让我们在理解环境变量文件优先级的同时，根据项目情况有效管理每个环境所需的设置。