Next.js 14+环境变量无值问题：Docker部署下如何解决？

开发环境用yarn dev启动时，.env里定义的NEXT_PUBLIC_API能正常读取，但Docker部署后该变量显示undefined。试过两种.env写法（NEXT_PUBLIC_API=url-api和NEXT_PUBLIC_API="url-api"），在TSX组件里加了校验还是取不到值。相关代码和版本信息如下：

调用代码 #

const apiURL = process.env.NEXT_PUBLIC_API
console.log("NEXT_PUBLIC_API: ", apiURL)
console.log("NEXT_PUBLIC_API: ", process.env.NEXT_PUBLIC_API)

if (!process.env.NEXT_PUBLIC_API) {
  console.error("no endpoit")
} else {
  console.log("with endpoint")
}

try {
  const response = await fetch(process.env.NEXT_PUBLIC_API, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    ...
}

Dockerfile #

FROM node:alpine

RUN apk add --update nodejs npm 

# RUN npm install --global yarn

WORKDIR /front

COPY package.json /front/package.json

COPY tsconfig.json /front/tsconfig.json

COPY public/ /front/public

COPY src/ /front/src

RUN yarn && yarn build

CMD ["yarn","start"]

版本信息 #

• Next.js: 14.0.4
• React: 18.2.0
• TypeScript: 5.3.3

问题根源 #

Next.js带NEXT_PUBLIC_前缀的环境变量是构建阶段注入到客户端代码里的，你的Dockerfile没把.env文件复制到镜像中，构建过程根本读不到这个变量，自然会返回undefined。

解决办法 #

方法一：直接复制.env文件到镜像

在Dockerfile的COPY步骤里加上.env文件的复制，确保构建时能读取到变量：

FROM node:alpine

RUN apk add --update nodejs npm 

WORKDIR /front

# 新增：复制.env文件到容器工作目录
COPY .env /front/.env

COPY package.json /front/package.json
COPY tsconfig.json /front/tsconfig.json
COPY public/ /front/public
COPY src/ /front/src

RUN yarn && yarn build

CMD ["yarn","start"]

如果用的是生产环境专用的.env.production，就把COPY .env改成COPY .env.production /front/.env.production。

方法二：构建时传递参数（适合敏感信息）

不想把.env打包进镜像的话，可以通过构建参数传递变量：

1. 修改Dockerfile，添加ARG和ENV声明：

   FROM node:alpine
   
   RUN apk add --update nodejs npm 
   
   WORKDIR /front
   
   # 定义构建阶段可用的参数
   ARG NEXT_PUBLIC_API
   # 将参数转为环境变量，供构建时使用
   ENV NEXT_PUBLIC_API=$NEXT_PUBLIC_API
   
   COPY package.json /front/package.json
   COPY tsconfig.json /front/tsconfig.json
   COPY public/ /front/public
   COPY src/ /front/src
   
   RUN yarn && yarn build
   
   CMD ["yarn","start"]
   

2. 构建镜像时传入参数：

   docker build --build-arg NEXT_PUBLIC_API=你的API地址 -t 你的镜像名 .
   

验证 #

重新构建镜像并启动容器，看控制台输出，如果打印with endpoint，说明变量已经正常注入了。

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