env | Next.js - 简体中文

env

自 Next.js 9.4 版本发布后，我们为添加环境变量提供了更直观且符合人体工程学的体验。快来试试吧！

须知：以此方式指定的环境变量将始终包含在 JavaScript 打包文件中，环境变量名前缀 NEXT_PUBLIC_ 仅当通过环境或 .env 文件指定时才有效。

要将环境变量添加到 JavaScript 打包文件，请打开 next.config.js 并添加 env 配置：

next.config.js

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

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

function Page() {
  return <h1>customKey 的值是: {process.env.customKey}</h1>
}

export default Page

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

例如，以下代码：

return <h1>customKey 的值是: {process.env.customKey}</h1>

最终会被转换为：

return <h1>customKey 的值是: {'my-value'}</h1>