如何在nextjs中使用不同的.env文件?

克里斯蒂安·弗洛雷斯(CristianFlórez)

我希望环境变量具有不同的配置文件,并能够在我的下一个项目中使用它们。我看到了dotenv的示例

但是我不喜欢在.env文件中定义变量,也不想在config.next.js文件中定义变量。如果由于某种原因我将变量放在.env文件中,但是忘记将它们放在config.next.js文件中,则代码开始出现问题。有没有一种方法可以更有效地做到这一点?

我在package.json中的脚本:

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "lint": "eslint pages --ext .ts,.tsx,.js",
    "test": "jest",
    "commit": "git-cz",
    "dev:production": "dotenv next"
},

我的.env变量

TITULO=react, typescript, material ui App

零件

import { NextPage }          from 'next';
import { FunctionComponent } from 'react';

interface HelloWorldProps {
  nombre: string,
  saludo?: string
}


const HelloWorld: FunctionComponent<HelloWorldProps> = ({ nombre, saludo = 'noches' }: HelloWorldProps) => (
  <>
    <h1>Hola {nombre} buenas {saludo}</h1>
    {/* eslint-disable-next-line multiline-ternary */}
    <h2>{process.env.TITULO ? 'hola' : 'adios'}</h2>
  </>
);

const Home: NextPage = () => <HelloWorld nombre="cristian" />;

export default Home;

亚历山大·金

Next 9.4内置了对.env文件的支持:https ://nextjs.org/docs/basic-features/environment-variables

但是,如果您想拥有多个.env文件,例如:

  • .env。发展
  • .env.staging
  • .env.prestaging
  • .env。生产

内置的env变量支持是不可能的。现在只有3种正式支持的环境:“开发”,“测试”,“生产”。随着next dev您使用“开发”,next build && next start使用“生产”环境。

如果您需要针对生产环境进行构建,但是例如使用“ .env.staging”,则需要添加env-cmd软件包,并将此行添加到package.json中:

"build:staging": "env-cmd -f .env.staging yarn build && yarn start"

接下来将使用“ .env.staging”变量进行生产构建。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在一个css文件中使用不同的颜色主题

来自分类Dev

如何在Java中使用不同的行分隔符处理文件?

来自分类Dev

如何在 ng serve 和 ng build 中使用不同的 index.html 文件?

来自分类Dev

如何在 Symfony 中使用不同的配置(ConfigurationInterface)在同一文件中加载不同的配置

来自分类Dev

在.env文件中使用私钥

来自分类Dev

如何在GitHub Actions中使用env文件?

来自分类Dev

如何在GitHub Actions中使用env文件?

来自分类Dev

如何基于yml文件但使用不同的Python版本创建新的conda env

来自分类Dev

如何使用Maven在不同的运行环境中使用不同的web.xml文件

来自分类Dev

使用 env 文件反应构建

来自分类Dev

在Heroku的生产环境中使用ENV文件

来自分类Dev

在.env(dotenv)文件中使用PHP函数

来自分类Dev

如何在IntelliJ idea Java项目中使用不同的输入文件运行同一可执行文件的多个实例

来自分类Dev

.env调用不同文件中的变量

来自分类Dev

如何在不同的文件上使用不同的grunt-contrib-less选项

来自分类Dev

如何在PhpStorm中编辑.env文件?

来自分类Dev

如何在 jquery 中访问 .env 文件?

来自分类Dev

如何在Mac OS X中使用不同的大小写创建具有相同名称的两个文件

来自分类Dev

如何使用bash读取yaml或env文件

来自分类Dev

如何在 vscode 中为测试文件使用不同的 tsconfig 文件?

来自分类Dev

通过$ _ENV使用.env文件中的参数是否正常?

来自分类Dev

如何在带有Typescript项目的React JS中使用.env文件?

来自分类Dev

iOS块,如何在不同的实现文件中使用

来自分类Dev

c语言如何在不同的文件中使用struct

来自分类Dev

如何在Makefile中对两组文件使用不同的规则?

来自分类Dev

在 jasmine 中使用不同 .ts 文件中的类

来自分类Dev

在 Webpack 中使用不同的文件和函数

来自分类Dev

如何在OpenGL核心配置文件中使用不带VAO的VBO?

来自分类Dev

如何为Laravel生成.env文件?

Related 相关文章

  1. 1

    如何在一个css文件中使用不同的颜色主题

  2. 2

    如何在Java中使用不同的行分隔符处理文件?

  3. 3

    如何在 ng serve 和 ng build 中使用不同的 index.html 文件?

  4. 4

    如何在 Symfony 中使用不同的配置(ConfigurationInterface)在同一文件中加载不同的配置

  5. 5

    在.env文件中使用私钥

  6. 6

    如何在GitHub Actions中使用env文件?

  7. 7

    如何在GitHub Actions中使用env文件?

  8. 8

    如何基于yml文件但使用不同的Python版本创建新的conda env

  9. 9

    如何使用Maven在不同的运行环境中使用不同的web.xml文件

  10. 10

    使用 env 文件反应构建

  11. 11

    在Heroku的生产环境中使用ENV文件

  12. 12

    在.env(dotenv)文件中使用PHP函数

  13. 13

    如何在IntelliJ idea Java项目中使用不同的输入文件运行同一可执行文件的多个实例

  14. 14

    .env调用不同文件中的变量

  15. 15

    如何在不同的文件上使用不同的grunt-contrib-less选项

  16. 16

    如何在PhpStorm中编辑.env文件?

  17. 17

    如何在 jquery 中访问 .env 文件?

  18. 18

    如何在Mac OS X中使用不同的大小写创建具有相同名称的两个文件

  19. 19

    如何使用bash读取yaml或env文件

  20. 20

    如何在 vscode 中为测试文件使用不同的 tsconfig 文件?

  21. 21

    通过$ _ENV使用.env文件中的参数是否正常?

  22. 22

    如何在带有Typescript项目的React JS中使用.env文件?

  23. 23

    iOS块,如何在不同的实现文件中使用

  24. 24

    c语言如何在不同的文件中使用struct

  25. 25

    如何在Makefile中对两组文件使用不同的规则?

  26. 26

    在 jasmine 中使用不同 .ts 文件中的类

  27. 27

    在 Webpack 中使用不同的文件和函数

  28. 28

    如何在OpenGL核心配置文件中使用不带VAO的VBO?

  29. 29

    如何为Laravel生成.env文件?

热门标签

归档