env

自 Next.js 9.4 发布以来，我们现在有了一个更加直观和符合人体工程学的体验，用于添加环境变量。试试看吧！

值得注意的是：以这种方式指定的环境变量将始终包含在 JavaScript 包中，只有在通过环境或 .env 文件指定它们时，在环境变量名称前加上 NEXT_PUBLIC_ 才有效果。

要在 JavaScript 包中添加环境变量，请打开 next.config.js 并添加 env 配置：

module.exports = {
  env: {
    customKey: "my-value",
  },
};

现在你可以在代码中访问 process.env.customKey。例如：

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>;
}
 
export default Page;

Next.js 将在构建时将 process.env.customKey 替换为 'my-value'。由于 webpack DefinePlugin 的特性，尝试解构 process.env 变量将无法工作。

例如，以下行：

return <h1>The value of customKey is: {process.env.customKey}</h1>;

最终将变为：

return <h1>The value of customKey is: {"my-value"}</h1>;