如何在nextjs中使用不同的.env文件？
我希望为环境变量拥有不同的配置文件，并能够在我的下一个项目中使用它们。我看到了多滕诺夫的例子。
但我不喜欢在.env文件中定义变量，也不喜欢在config.next.js文件中定义变量。如果出于某种原因，我将变量放入.env文件，但忘记将它们放入config.next.js文件中，则代码开始出现问题。有办法更有效地做这件事吗？
My脚本在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"
},My .env vars
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;回答 9
Stack Overflow用户
发布于 2020-05-12 11:34:09
Next 9.4内置对.env文件的支持：https://nextjs.org/docs/basic-features/environment-variables
但是，如果您想拥有多个.env文件，比如：
- .env.development
- .env.staging
- .env.prestaging
- .env.production
使用内置的env变量支持是不可能的。目前只有3种正式支持的环境：“开发”、“测试”、“生产”。对于next dev，您使用“开发”，next build && next start使用“生产”环境。
如果您需要为生产环境构建，但例如使用".env.staging“，则需要添加环境-cmd包，并将这一行添加到package.json中：
"build:staging": "env-cmd -f .env.staging yarn build && yarn start"接下来将使用".env.staging“变量进行生产构建。
Stack Overflow用户
发布于 2021-03-04 02:04:12
大多数这些答案的问题是，它们违背了“构建一旦在任何地方运行”的原则，实际上，我们大多数人都在使用这种技术构建和运行Docker容器。不可能有这样的多个构建命令，这将是一个糟糕的实践。
最好在运行时使用您的环境。我们创建了一个包，该包允许下一次静态优化，并且仍然通过window.__ENV具有运行时env。
https://github.com/andrewmclagan/react-env
这是通过在运行时从白色的env生成一个环境配置对象来实现的：
{
...
"scripts": {
"dev": "react-env -- next dev", // where .env.${APP_ENV}
"start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
}
...
}Stack Overflow用户
发布于 2020-06-19 06:44:29
您可以通过以下两种方法在nextjs中拥有不同的.env文件：
1.使用env-cmd包
在脚本中提供环境文件的路径，如：
"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文件中添加以下内容：
require("dotenv").config({ path: `${process.env.ENVIRONMENT}` });
module.exports = {
// your configs
}在脚本中，提供环境变量，如：
"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*文件放在根文件夹中，否则下一步将自动从您的.evn*文件中选择，它只支持生产和开发阶段。所以它会忽略其他的.‘ll.我的阶段文件。
https://stackoverflow.com/questions/59462614
复制相似问题
腾讯云开发者
