env

自从发布 Next.js 9.4 以来，我们现在拥有了更直观、更符合人体工程学的体验，可以 添加环境变量。试试吧！

**须知**：以这种方式指定的环境变量将**始终**包含在 JavaScript 包中，仅在指定环境变量名称前缀为 NEXT_PUBLIC_ 时，才会对 通过环境或 .env 文件 指定它们产生影响。

要将环境变量添加到 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>