NextJS - 在应用程序启动时设置动态环境变量

Question

在我们的实施过程中，我们创建了一个单独的建筑，并经历了不同的阶段（集成、登台和生产）。在每种环境中，我们都有不同的环境差异。

问题是，当我们启动服务器时，它只引用服务器上的环境变量，而在客户端，process.env 文件是空的。

堆栈：“下一个”：“5.0.0”“babel-plugin-inline-dotenv”：“1.1.1”，

用于加载 .env 文件使用“inline-dotenv”

Answer 1

您可以在 next.config.js 文件中使用publicRuntimeConfig。

例子：

// next.config.js
module.exports = {
  serverRuntimeConfig: { // Will only be available on the server side
    mySecret: 'secret'
  },
  publicRuntimeConfig: { // Will be available on both server and client
    staticFolder: '/static',
    mySecret: process.env.MY_SECRET // Pass through env variables
  }
}

请注意，publicRuntimeConfig.mySecret 的值现在是从环境变量中获取的。 所以现在你可以通过 importin next/config 读取该值

例子：

import getConfig from 'next/config';

const { publicRuntimeConfig } = getConfig();
console.log(publicRuntimeConfig.mySecret);

来源：next.js docs