Next.js 多个 .env 文件

Question

我是 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"
  },

我想将它添加到脚本中。

Answer 1

您可以添加如下脚本

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

Answer 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

Next.js 多个 .env 文件

Next.js multiple .env files

reactjs

next.js

dotenv