Next.js 多个 .env 文件答案

【问题标题】：Next.js multiple .env filesNext.js 多个 .env 文件
【发布时间】：2020-03-25 12:08:37
【问题描述】：

我是 Next.js 的新手，在我的项目中，我安装了 dotenv(https://www.npmjs.com/package/dotenv) 并在项目根目录中创建了一个 .env 文件，一切正常。

例如。 API_BASE_PATH=http://localhost:8000/api

然后，我在其中创建了另一个名为 .env.testing 的 .env 文件，API_BASE_PATH 有不同的值。

那么，我如何在本地开发中的那些 .env 之间切换？

"scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "export": "npm run build && next export"
  },

我想将它添加到脚本中。

【问题讨论】：

看看env-cmd库：npmjs.com/package/env-cmd

标签： reactjs next.js dotenv

【解决方案1】：

您可以添加如下脚本

"scripts": {
  "env1": "DOTENV_CONFIG_PATH=./.env next dev",
  "env2": "DOTENV_CONFIG_PATH=./.env.testing next dev"
}

【讨论】：

【解决方案2】：

所以，我将分享我使用的另一种方式：

一个.env 文件

ENV=development // change to the env you want
DEV_VAR='dev-example'
STAGE_VAR='stage-example'
PROD_VAR='prod-example'

然后在我的 next.config.js

module.exports = (phase, { defaultConfig }) => {
  let exampleVar;

  switch(process.env.ENV) {
    case "development":
    exampleVar = process.env.DEV_VAR;
    break;
    
    case "stage":
    exampleVar = process.env.STAGE_VAR;
    break;

    case "prod":
    exampleVar = process.env.PROD_VAR;
    break;

    default: 
    exampleVar = process.env.DEV_VAR;
    break;
  }

  return {
    ...defaultConfig,
    env: {
      exampleVar,
    },
    ... other next config options
  }
}

然后，在您的代码中，您可以使用：

process.env.exampleVar

然后，当您开发时，您只需将ENV 值切换到您想要工作的环境。

NextJS 允许您在配置中使用函数： next.config.js

【讨论】：