同一NextJS Docker镜像如何适配不同环境变量？

不用每次克隆镜像重新构建两次，有几种可行的方案解决这个问题，核心是区分客户端（NEXT_PUBLIC_开头）和服务端变量的不同处理方式：

1. 运行时生成客户端配置文件（最直接的方式） #

因为NEXT_PUBLIC_变量会在构建时被固化到静态文件里，我们可以绕过这个机制，在容器启动时用环境变量生成一个客户端可访问的配置文件：

• 写一个启动脚本start.sh：

  #!/bin/sh
  # 用环境变量生成客户端配置文件，可设置默认值
  echo "window.__APP_CONFIG__ = {
    API_URL: '${API_URL:-https://default-api.com}',
    APP_NAME: '${APP_NAME:-Default App}'
  }" > /app/public/config.js
  
  # 启动NextJS服务
  npm run start
  

• 修改Dockerfile，把脚本加入镜像并设置为启动命令：

  FROM node:18-alpine
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  RUN npm run build
  # 复制启动脚本并赋予执行权限
  COPY start.sh .
  RUN chmod +x start.sh
  # 用脚本启动服务
  CMD ["./start.sh"]
  

• 在NextJS应用里使用这个配置：在客户端组件里直接引用window.__APP_CONFIG__，或者封装成工具函数：

  export const getAppConfig = () => {
    return window.__APP_CONFIG__ || {};
  };
  

• 运行容器时注入变量：

  docker run -e API_URL="https://client1-api.com" -e APP_NAME="客户1应用" your-image
  

2. 用API路由提供运行时配置（官方推荐方案） #

按照NextJS官方文档的建议，搭建一个API路由来返回运行时环境变量：

• 在app/api/config/route.js中编写：

  export async function GET() {
    return Response.json({
      apiUrl: process.env.API_URL,
      appName: process.env.APP_NAME
    });
  }
  

• 客户端在初始化时调用这个API获取配置，比如在全局状态或初始化逻辑里：

  export async function getAppConfig() {
    const res = await fetch('/api/config');
    return res.json();
  }
  

• 运行容器时直接用-e注入变量即可，服务端API会读取到运行时的环境变量并返回给客户端。

3. 服务端变量直接用运行时注入 #

对于非NEXT_PUBLIC_开头的变量（仅在服务端组件、API路由、Server Actions里使用），不需要做额外处理，直接在docker run或docker-compose.yml里用-e注入即可——这些代码是运行时执行的，不会在构建时固化。

4. App Router下的Server Component传递配置 #

如果用的是NextJS 13.5的App Router，可以利用Server Component的特性，在服务端读取运行时变量，然后传递给Client Component：

• 在layout.js（Server Component）里读取环境变量并封装成Context：

  'use client';
  import { createContext, useContext } from 'react';
  
  const AppConfigContext = createContext({});
  
  export function AppConfigProvider({ children, value }) {
    return (
      <AppConfigContext.Provider value={value}>
        {children}
      </AppConfigContext.Provider>
    );
  }
  
  export function useAppConfig() {
    return useContext(AppConfigContext);
  }
  

• 在根layout.js（Server Component）里传入配置：

  import { AppConfigProvider } from './app-config-provider';
  
  export default function RootLayout({ children }) {
    const appConfig = {
      apiUrl: process.env.API_URL,
      appName: process.env.APP_NAME
    };
    return (
      <html lang="zh-CN">
        <body>
          <AppConfigProvider value={appConfig}>
            {children}
          </AppConfigProvider>
        </body>
      </html>
    );
  }
  

• 客户端组件通过useAppConfig()钩子获取配置，无需额外API请求，直接从服务端拿到运行时的值。

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