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>