环境 | DevRefinery | DevRefinery

App Router Only

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

Pages Router Only

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

App Router Only

须知：以这种方式指定的环境变量将始终包含在 JavaScript bundle 中，只有在通过环境变量或 .env 文件指定环境变量时，为其名称添加 NEXT_PUBLIC_ 前缀才有效。

Pages Router Only

须知：以这种方式指定的环境变量将始终包含在 JavaScript bundle 中，只有在通过环境变量或 .env 文件指定环境变量时，为其名称添加 NEXT_PUBLIC_ 前缀才有效。

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

javascript

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

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

jsx

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

export default Page

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

例如，以下行：

jsx

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

最终将变为：

jsx

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

App Router Only

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

Pages Router Only

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

App Router Only

须知：以这种方式指定的环境变量将始终包含在 JavaScript bundle 中，只有在通过环境变量或 .env 文件指定环境变量时，为其名称添加 NEXT_PUBLIC_ 前缀才有效。

Pages Router Only

须知：以这种方式指定的环境变量将始终包含在 JavaScript bundle 中，只有在通过环境变量或 .env 文件指定环境变量时，为其名称添加 NEXT_PUBLIC_ 前缀才有效。

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

javascript

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

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

jsx

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

export default Page

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

例如，以下行：

jsx

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

最终将变为：

jsx

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

文档导航