我创建了一个新的Next项目,我想根据NODE_ENV
变量管理应用行为。应用程序必须加载位于不同.env文件中的不同变量。 je如果我加载NODE_ENV=development
,则应用程序应加载.env.development
文件中的变量。在下一步中最有效,最安全的方法是什么。
在dev
脚本中,我传递了环境类型:
"scripts": {
"dev": "cross-env NODE_ENV=development next",
"build": "next build",
"start": "next start",
},
[在下一个配置中,我根据package.json中dotenv
脚本中的NODE_ENV
变量,从带有dev
库的正确的.env文件中加载环境变量。
const path = require('path');
const withOffline = require('next-offline');
const webpack = require('webpack');
require('dotenv').config({
path: path.resolve(
__dirname,
`.env.${process.env.NODE_ENV}`,
),
});
module.exports = withOffline({
webpack: (config) => {
// Returns environment variables as an object
const env = Object.keys(process.env).reduce((acc, curr) => {
acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
return acc;
}, {});
// Allows you to create global constants which can be configured
// at compile time, which in our case is our environment variables
config.plugins.push(new webpack.DefinePlugin(env));
return config;
},
});
TITLE=modo development
function HomePage() {
return <div>{process.env.TITLE}</div>
}
export default HomePage
[Nextjs
默认情况下支持env,而无需使用webpack.DefinePlugin
,只需将其传递给env
的next.config.js
属性。
所以您的代码将变为:
// next.conf.js
const path = require('path');
const withOffline = require('next-offline');
const webpack = require('webpack');
require('dotenv').config({
path: path.resolve(
__dirname,
`.env.${process.env.NODE_ENV}`,
),
});
module.exports = withOffline({
env: process.env
});