NextJS 13生产构建时fetch/async/await获取对象为undefined，开发环境正常

核心原因分析 #

静态构建（npm run build）时，NextJS会执行预渲染（SSG），此时fetch请求是在构建阶段执行的，而非应用运行在Docker容器的阶段。构建环境大概率不在Docker内部网络中，导致你配置的容器服务地址（如http://nginx/api）无法访问到GraphQL API；而npm run dev是运行时实时发起请求，应用已处于Docker网络内，因此能正常访问。

具体解决方案 #

1. 区分构建时与运行时的API地址 #

• 配置分环境的环境变量：
  • 在.env.development中设置开发运行时的API地址：NEXT_PUBLIC_API_URL=http://nginx/api
  • 在.env.production中设置构建时的API地址（若构建在主机执行，用端口映射后的localhost地址）：NEXT_PUBLIC_API_URL=http://localhost:8888
• 代码中通过环境变量发起请求：

  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
  const res = await fetch(`${apiUrl}/graphql`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: '你的GraphQL查询语句' })
  });
  

2. 添加严格的错误与数据校验 #

在访问data.item.name前先校验数据结构，避免构建时因数据缺失失败：

const res = await fetch(apiUrl);
if (!res.ok) {
  throw new Error(`API请求失败: ${res.status}`);
}
const data = await res.json();
// 校验数据是否符合预期
if (!data || !data.item) {
  // 根据需求返回默认内容或终止渲染
  return <div>数据加载失败</div>;
}
// 确认数据有效后再访问属性
return <div>{data.item.name}</div>;

3. 将fetch逻辑移到客户端组件 #

若不需要在构建时预渲染数据，可将包含fetch的组件标记为客户端组件，让请求在浏览器运行时执行（此时应用已在Docker网络中，能正常访问容器服务地址）：

'use client'; // 组件顶部添加该指令

export default async function MyComponent() {
  const res = await fetch('http://nginx/api/graphql', { /* 请求配置 */ });
  const data = await res.json();
  // 数据校验与渲染逻辑
}

4. 调整Docker构建流程（多阶段构建场景） #

如果构建在Docker容器内完成，需确保构建阶段容器加入到应用与API所在的Docker网络，让构建时能通过服务名访问API。示例Dockerfile：

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 加入现有Docker网络（假设网络名为my-app-network）
RUN docker network connect my-app-network builder
RUN npm run build

# 运行阶段
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/package*.json ./
RUN npm install --production
EXPOSE 3000
CMD ["npm", "start"]

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