[英]Next.js pass NODE_ENV to client
我正在使用 Next.js 构建一个 React SSR 应用程序。
我希望能够在客户端访问 NODE_ENV,因为这将告诉我的应用程序要使用哪些 API 端点。
我正在努力为此找到一个合适的方法。 当我第一次在服务器上呈现页面时,我想将 NODE_ENV 定义为窗口变量,然后在我进行 API 调用的辅助函数中,我会检查代码是在服务器上还是在客户端上调用,并根据需要使用 window 或 process.env 变量。
有没有人对这样的问题有很好的解决方案。 这一定是一个常见问题,但我找不到任何好的解决方案。
require('dotenv').config() const path = require('path') const Dotenv = require('dotenv-webpack') module.exports = { webpack: (config) => { config.plugins = config.plugins || [] config.plugins = [ ...config.plugins, // Read the .env file new Dotenv({ path: path.join(__dirname, '.env'), systemvars: true }) ] return config } }
参考: 这里
env-config.js
const prod = process.env.NODE_ENV === 'production'
module.exports = {
'process.env.BACKEND_URL': prod ? 'https://api.example.com' : 'https://localhost:8080'
}
.babelrc.js
const env = require('./env-config.js')
module.exports = {
presets: ['next/babel'],
plugins: [['transform-define', env]]
}
索引.js
export default () => (
<div>Loading data from { process.env.BACKEND_URL }</div>
)
参考: 这里
下一个.config.js
module.exports = {
publicRuntimeConfig: {
API_URL: process.env.API_URL
}
}
索引.js
import React from 'react'
import getConfig from 'next/config'
const {publicRuntimeConfig} = getConfig()
const {API_URL} = publicRuntimeConfig
export default class extends React.Component {
static async getInitialProps () {
// fetch(`${API_URL}/some-path`)
return {}
}
render () {
return <div>
The API_URL is {API_URL}
</div>
}
}
参考: 这里
@DarrylR 已经提到使用next.config.js
和 Next 的运行时配置,但您也可以使用 Next 的构建时配置。
这使您可以将process.env.XXXX
直接放入代码中(如下面的第 3 步所示),并且您无需导入任何内容。 但是,如果您在使用Next.js本地构建和部署到ZEIT Now时都应设置环境变量,我不知道您是否可以使用此方法将它们保存在一个文件中(请参阅下面的第 2 步)。
运行时配置文档建议您通常希望使用构建时配置:
警告:通常您希望使用构建时配置来提供您的配置。 这样做的原因是运行时配置增加了渲染/初始化开销,并且与自动预渲染不兼容。
脚步:
NODE_ENV
如果您使用 ZEIT Now 进行部署,则可以在now.json
设置构建时使用的环境变量:
{
"version": 2,
"build": {
"env": {
"NODE_ENV": "production"
}
}
}
如果你想NODE_ENV
在本地以及运行时进行设置,这样就不会被设置now.json
。 但是,您可以通过其他方式设置它,例如:
$ NODE_ENV=production npm run build
或将package.json
的构建脚本更改为
"build": "NODE_ENV=production next build"
如果需要,您当然也可以为其他脚本设置NODE_ENV
,而不是 build。
process.env.NODE_ENV
下一个内联值这增加了next.config.js
描述在这里:
module.exports = {
env: {
NODE_ENV: process.env.NODE_ENV
}
};
if (process.env.NODE_ENV === "production") {
console.log("In production")
} else {
console.log("Not in production")
}
另一个简单的解决方案:
在根文件夹上创建 2 个文件:
.env.development
.env.production
在里面根据需要添加变量,例如在 .env.development 文件中:
NEXT_PUBLIC_ENV="development"
并在 .env.production 文件中:
NEXT_PUBLIC_ENV="production"
然后使用它例如:
console.log('Version: ', process.env.NEXT_PUBLIC_ENV);
从 Next.js 9.4 开始,NextJs 现在内置了对环境变量的支持,这允许您使用 .env 文件执行以下操作:
一个例子.env.local:
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
如果要将 env 变量公开给客户端,则必须在变量前加上NEXT_PUBLIC_
前缀,例如:
NEXT_PUBLIC_API_PORT=4000
如果你想使用这个变量,你可以像这样使用它: process.env.NEXT_PUBLIC_API_PORT
有关文档,请参见此处
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.