Docker构建时设置的NEXT_PUBLIC_VERSION在Next.js应用中无法访问

核心原因：Next.js NEXT_PUBLIC_* 变量的注入时机 #

Next.js中带NEXT_PUBLIC_前缀的环境变量是在应用构建阶段（执行next build时）通过Webpack静态注入到客户端代码中的，而非在运行时（next start）动态读取容器的环境变量。

你的场景中，Docker镜像只执行了next start，说明Next.js应用是在镜像构建之外完成打包的（比如本地或CI流程中提前执行了next build）。此时客户端代码里的NEXT_PUBLIC_VERSION值已经被固定为构建时的环境变量值（大概率当时未设置该变量，所以为空），运行时容器里的ENV变量无法覆盖已经打包好的客户端代码内容。

解决方案 #

方案1：在Docker镜像内完成应用构建

修改Dockerfile，将next build步骤纳入镜像构建流程，这样构建时就能读取到Docker中设置的NEXT_PUBLIC_VERSION变量：

FROM node:20.0.0-alpine3.17
RUN apk add dumb-init

WORKDIR /usr/src/app

ARG VERSION
ENV NEXT_PUBLIC_VERSION $VERSION

# 拷贝依赖配置并安装
COPY package*.json ./
RUN npm ci

# 拷贝应用源码
COPY . .

# 构建Next.js应用（此时会注入NEXT_PUBLIC_变量）
RUN npm run build

ENTRYPOINT ["/usr/bin/dumb-init", "--"]
CMD npx next start

方案2：改为服务端组件读取运行时变量

如果不想修改镜像构建流程，可将Footer组件改为服务端组件（不添加'use client'指令）。服务端组件在运行时会直接读取容器的环境变量，无需提前注入：

export const Footer = () => {
    return (
        <div>
            Version {process.env.NEXT_PUBLIC_VERSION}
        </div>
    )
}

方案3：ArgoCD部署时传递变量（你已了解的方法）

在部署清单中设置环境变量，此时若应用是服务端组件可直接读取；若为客户端组件，需要确保应用在部署前的构建流程中能读取到该变量（比如CI构建时从ArgoCD或配置中心拉取值）。

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