Next.js 将 NODE_ENV 传递给客户端
Next.js pass NODE_ENV to client
我正在构建一个 React SSR 应用程序，使用 Next.js。
我希望能够在客户端访问 NODE_ENV，因为这会告诉我的应用程序使用哪个 API 端点。
我正在努力寻找一个合适的方法来解决这个问题。当我第一次在服务器上呈现页面时，我想将 NODE_ENV 定义为 window 变量，然后在我进行 API 调用的辅助函数中，我会检查如果在服务器或客户端上调用代码，并根据需要使用 window 或 process.env 对象。
对于这样的问题，有谁有好的解决办法吗？这一定是个普遍问题，但我找不到任何好的解决方案。
1。您可以将其包含在 webpack 配置中（使用 dotenv-webpack 依赖项）：
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
}
}
参考：here
2。使用 babel 插件将变量导入整个应用程序：
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]]
}
index.js
export default () => (
<div>Loading data from { process.env.BACKEND_URL }</div>
)
参考：here
3。使用 next/config:
下一个。config.js
module.exports = {
publicRuntimeConfig: {
API_URL: process.env.API_URL
}
}
index.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>
}
}
参考：here
使用 Next 的构建时配置
@DarrylR 已经提到使用 next.config.js 和
接下来是runtime configuration，
但您也可以使用 Next 的 build-time configuration.
这样您就可以将 process.env.XXXX 直接放入代码中（如下面的第 3 步所示），而无需导入任何内容。但是，如果您在使用 Next.js and when you deploy to ZEIT Now 在本地构建时应该同时设置环境变量，我不知道您是否可以使用这种方法将它们保存在一个文件中（参见下面的步骤 2）。
运行时配置文档建议您通常要使用构建时配置：
Warning: Generally you want to use build-time configuration to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with automatic prerendering.
步骤：
1。为构建过程设置 NODE_ENV
1.1 使用 ZEIT Now
如果您使用 ZEIT Now 进行部署，您可以在 now.json 中设置 env variables used at build time:
{
"version": 2,
"build": {
"env": {
"NODE_ENV": "production"
}
}
}
1.2 当运行本地时（可选）
如果您希望在本地 运行 时也设置 NODE_ENV，则 now.json 将不会设置。
但是您可以通过其他方式设置它，例如：
$ NODE_ENV=production npm run build
或将 package.json 中的构建脚本更改为
"build": "NODE_ENV=production next build"
当然，如果需要，您也可以为构建以外的其他脚本设置 NODE_ENV。
2。使 process.env.NODE_ENV
的下一个内联值
按照说明将此添加到 next.config.js here:
module.exports = {
env: {
NODE_ENV: process.env.NODE_ENV
}
};
3。在代码中使用
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
如果要向客户端公开环境变量，则必须在变量前加上NEXT_PUBLIC_ 例如：
NEXT_PUBLIC_API_PORT=4000
如果要使用变量，可以这样使用：process.env.NEXT_PUBLIC_API_PORT
有关文档，请参阅 here
我正在构建一个 React SSR 应用程序，使用 Next.js。
我希望能够在客户端访问 NODE_ENV，因为这会告诉我的应用程序使用哪个 API 端点。
我正在努力寻找一个合适的方法来解决这个问题。当我第一次在服务器上呈现页面时，我想将 NODE_ENV 定义为 window 变量，然后在我进行 API 调用的辅助函数中，我会检查如果在服务器或客户端上调用代码，并根据需要使用 window 或 process.env 对象。
对于这样的问题，有谁有好的解决办法吗？这一定是个普遍问题，但我找不到任何好的解决方案。
1。您可以将其包含在 webpack 配置中（使用 dotenv-webpack 依赖项）：
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
}
}
参考：here
2。使用 babel 插件将变量导入整个应用程序：
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]]
}
index.js
export default () => (
<div>Loading data from { process.env.BACKEND_URL }</div>
)
参考：here
3。使用 next/config:
下一个。config.js
module.exports = {
publicRuntimeConfig: {
API_URL: process.env.API_URL
}
}
index.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>
}
}
参考：here
使用 Next 的构建时配置
@DarrylR 已经提到使用 next.config.js 和
接下来是runtime configuration，
但您也可以使用 Next 的 build-time configuration.
这样您就可以将 process.env.XXXX 直接放入代码中（如下面的第 3 步所示），而无需导入任何内容。但是，如果您在使用 Next.js and when you deploy to ZEIT Now 在本地构建时应该同时设置环境变量，我不知道您是否可以使用这种方法将它们保存在一个文件中（参见下面的步骤 2）。
运行时配置文档建议您通常要使用构建时配置：
Warning: Generally you want to use build-time configuration to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with automatic prerendering.
步骤：
1。为构建过程设置 NODE_ENV
1.1 使用 ZEIT Now
如果您使用 ZEIT Now 进行部署，您可以在 now.json 中设置 env variables used at build time:
{
"version": 2,
"build": {
"env": {
"NODE_ENV": "production"
}
}
}
1.2 当运行本地时（可选）
如果您希望在本地 运行 时也设置 NODE_ENV，则 now.json 将不会设置。
但是您可以通过其他方式设置它，例如：
$ NODE_ENV=production npm run build
或将 package.json 中的构建脚本更改为
"build": "NODE_ENV=production next build"
当然，如果需要，您也可以为构建以外的其他脚本设置 NODE_ENV。
2。使 process.env.NODE_ENV
的下一个内联值
按照说明将此添加到 next.config.js here:
module.exports = {
env: {
NODE_ENV: process.env.NODE_ENV
}
};
3。在代码中使用
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
如果要向客户端公开环境变量，则必须在变量前加上NEXT_PUBLIC_ 例如：
NEXT_PUBLIC_API_PORT=4000
如果要使用变量，可以这样使用：process.env.NEXT_PUBLIC_API_PORT
有关文档，请参阅 here