env

Next.js 9.4 版本发布以来,我们为添加环境变量提供了更直观和人性化的体验。快来试试吧!

须知:以此方式指定的环境变量将始终包含在 JavaScript 包中,只有在通过环境或 .env 文件指定时,给环境变量名添加 NEXT_PUBLIC_ 前缀才会生效。

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