How to use different env files with nextjs?

在Next.js中，管理不同环境（开发、测试、生产）的配置可以通过使用不同的.env文件实现。Next.js支持环境变量的加载，并且有一套特定的规则用于加载不同环境的.env文件。以下是如何使用不同的.env文件的步骤：

1. 创建.env文件: 在Next.js项目的根目录中，你可以创建以下.env文件来定义环境变量：

   • .env.local: 可以覆盖其他.env文件中的变量，不会被git版本控制系统跟踪，通常用于包含敏感信息。
   • .env.development: 只在next dev（即开发环境）中被加载。
   • .env.production: 只在next start（即生产环境）中被加载。
   • .env.test: 在执行自动化测试时使用，需要自己配置加载机制。
   • .env: 默认的环境变量文件，无论何种环境都会被加载，但会被以上特定环境的配置覆盖。

2. 设置环境变量: 在每个.env文件中，设置必要的环境变量，格式如下：

   plaintext
   # .env.local
   API_SECRET=local_secret
   
   # .env.development
   API_URL=https://dev.example.com/api
   
   # .env.production
   API_URL=https://prod.example.com/api

3. 加载环境变量: Next.js会自动加载这些变量，无需额外的配置。你可以在代码中通过process.env来访问这些变量：

   javascript
   console.log(process.env.API_URL); // 输出将根据当前环境加载对应的.env文件中的变量值

4. 使用环境变量: 你可以在Next.js的页面、API路由、getServerSideProps或getStaticProps等服务器端代码中直接使用process.env来访问环境变量。

5. 公开环境变量到浏览器: 如果需要在浏览器中使用环境变量，你需要在环境变量名前加上NEXT_PUBLIC_前缀：

   plaintext
   NEXT_PUBLIC_ANALYTICS_ID=xyz123

   这样，你可以在客户端JavaScript中安全地使用这些变量：

   javascript
   console.log(process.env.NEXT_PUBLIC_ANALYTICS_ID); // 客户端也可访问

示例:

假设你有一个API的URL，在开发环境和生产环境中是不同的。你可以如下设置环境变量：

• 在.env.development文件中：

  plaintext
  API_URL=https://dev.api.example.com

• 在.env.production文件中：

  plaintext
  API_URL=https://api.example.com

当你在开发环境下运行next dev时，process.env.API_URL将会是https://dev.api.example.com。而当你在生产环境下运行next start时，环境变量将会是https://api.example.com。

通过这种方式，你可以根据当前的运行环境加载不同的环境变量，而不需要在代码中做任何改变，这有助于项目配置的管理和代码的可维护性。

可以通过以下两种方式在 nextjs 中拥有不同的 .env 文件：

1.使用env-cmd包

在脚本中提供环境文件的路径，例如：

shell
"scripts": {
    "start": "env-cmd path/to/prod/env/file next start",
    "start:dev": "env-cmd path/to/prod/env/file next dev",   
    "build:dev": "env-cmd path/to/dev/env/file next build",
    "build:test": "env-cmd path/to/test/env/file next build",
    "build:stage": "env-cmd path/to/stage/env/file next build",
    "build": "env-cmd path/to/stage/prod/file next build",      
},

2.使用dotenv包

在 next.config.js 文件中添加以下内容：

shell
require("dotenv").config({ path: `${process.env.ENVIRONMENT}` });

module.exports = {
      // your configs
}

并在您的脚本中提供环境变量，例如：

shell
"scripts": {
    "start": "ENVIRONMENT=path/to/prod/env/file next start",
    "start:dev": "ENVIRONMENT=path/to/dev/env/file next dev",
    "build:dev": "ENVIRONMENT=path/to/dev/env/file next build",
    "build:test": "ENVIRONMENT=path/to/test/env/file next build",
    "build:stage": "ENVIRONMENT=path/to/stage/env/file next build",
    "build": "ENVIRONMENT=path/to/stage/prod/file next build",      
},

注意：不要将您的 .env* 文件放在根文件夹中，否则 NEXT 将从您的 .evn* 文件中自动选择，并且它仅支持生产和开发阶段。所以它会忽略其他 .env.my-stage 文件。

对于任何有兴趣使用.yml文件来轻松管理环境变量的人，我是这样做的。

**yenv**在 中安装一个插件devDependencies。

在next.config.js中添加以下配置：

shell
const path = require("path");
const yenv = require("yenv");
const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");

module.exports = (phase) => {
  const isDev = phase === PHASE_DEVELOPMENT_SERVER;
  const NEXT_ENV = isDev ? "development" : process.env.APP_ENV;
  const rawEnv = yenv(path.resolve(".env.yml"), { raw: true, env: NEXT_ENV });
  
  return {
    ...some other config,
    env: getEnvVars(rawEnv, isDev).raw,
    compress: true,
  };
};

function getEnvVars(rawEnv, dev) {
  const NEXT_PUBLIC = /^NEXT_PUBLIC_/i;
  const raw = Object.keys(rawEnv)
    .filter((key) => NEXT_PUBLIC.test(key))
    .reduce((env, key) => {
      env[key] = rawEnv[key];
      return env;
    }, {});
  // Stringify all values so we can feed into Webpack DefinePlugin
  const stringified = {
    "process.env": Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };
  return { raw, stringified };
}

现在只需根据**package.json**脚本中的环境添加不同的构建命令即可。

shell
"scripts": {
    "dev": "node server.js",
    "build:production": "APP_ENV=production next build",
    "build:staging": "APP_ENV=staging next build",
    "start": "NODE_ENV=production node server.js"
  },

现在您可以通过单个文件使用环境变量，**.env.yml**如下所示：

shell
base:
  NEXT_PUBLIC_SECRET_KEY : ""
  NEXT_PUBLIC_ANOTHER_SECRET: ""

development:
  ~compose: base
  NEXT_PUBLIC_SECRET_KEY: "bnbnfjf"

staging:
  ~compose: base
  NEXT_PUBLIC_SECRET_KEY: "absadsad"

production:
  ~compose: base
  NEXT_PUBLIC_SECRET_KEY: "lasjdasodsdsad"

现在您可以调用npm run build:production加载生产环境变量和npm run build:staging暂存环境变量。

这提供了为您的用例提供任意数量的环境的好处。您只需要添加一个构建命令，并更新环境变量.env.yml就可以了。