Next.js将NODE_ENV传递给客户端

路易番长2020-03-20

我正在使用Next.js构建一个React SSR应用程序。

我希望能够在客户端访问NODE_ENV，因为这将告诉我的应用程序要使用哪些API端点。

我正在努力为此找到一个体面的方法。我想在第一次在服务器上呈现页面时将NODE_ENV定义为窗口变量，然后在进行API调用的辅助函数中检查是否在服务器或客户端上调用了代码，并根据需要使用window或process.env变量。

有没有人对这样的问题有好的解决方案。这肯定是一个普遍的问题，但是我找不到任何好的解决方案。

Eva神无2020/03/20 13:06:50

使用Next的构建时配置

@DarrylR已经提到了使用next.config.js和Next的运行时配置，但是您也可以使用Next的构建时配置。

这样，您就可以process.env.XXXX在代码中添加权限（如下面的步骤3所示），而不必导入任何内容。但是，如果在使用Next.js在本地构建和部署到ZEIT Now时都应该设置env变量，则我不知道是否可以使用此方法将它们保存在一个文件中（请参阅下面的步骤2）。

运行时配置文档建议您通常要使用构建时配置：

警告：通常，您想使用构建时配置来提供您的配置。这是因为运行时配置增加了渲染/初始化开销，并且与自动预渲染不兼容。

脚步：

如果部署使用现在ZEIT，您可以设置在构建时使用的ENV变量中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。

Add this to the next.config.js as described here:

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")
}

Newest Answer