Next.js Docker镜像运行时而非构建时设置环境变量的解决方案咨询

Next.js 默认将未做特殊配置的环境变量在构建阶段硬编码到产物中，但可以通过以下两种方案实现一次构建、多环境变量运行的需求，完全适配Docker镜像一次构建多次启动的业务场景：

方案1：使用运行时配置（推荐，适配next start启动的Node.js服务场景） #

• Pages Router 项目
  在next.config.js中声明运行时配置，分为仅服务端可访问的serverRuntimeConfig和客户端、服务端均可访问的publicRuntimeConfig两类，示例配置：

  module.exports = {
    // 仅服务端代码可读取，不会泄露到浏览器端
    serverRuntimeConfig: {
      API_SECRET: process.env.API_SECRET,
    },
    // 浏览器端和服务端都可读取，适合存放非敏感的公共配置
    publicRuntimeConfig: {
      API_PUBLIC_URL: process.env.API_PUBLIC_URL,
    }
  }
  

  使用时从next/config导入即可动态读取当前运行环境的变量：

  import getConfig from 'next/config';
  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
  

  该配置下的变量不会在构建阶段固化，每次启动Next.js服务时都会从当前运行环境读取最新的环境变量，Docker启动时直接通过-e参数传入变量即可生效。

• App Router 项目
  服务端组件默认可以直接读取process.env.xxx，读取逻辑为运行时动态获取，无需额外配置；如果需要在客户端组件使用运行时变量，可通过服务端组件将变量作为props传递给客户端组件，或在服务端将变量挂载到window全局对象供客户端读取。

方案2：静态导出场景占位符替换 #

如果你的项目使用next export做全静态导出，没有Node.js服务运行，可以通过容器启动脚本做变量替换：

• 构建阶段在静态文件的配置位置预留占位符，例如__API_PUBLIC_URL__
• 编写Docker启动脚本，容器启动时优先用sed等工具将静态文件中的占位符替换为当前环境的环境变量值，再启动Nginx等静态服务即可。

内容的提问来源于stack exchange，提问作者d3tr1tus