Next.js 13.3.1客户端组件API调用构建失败问题求助

问题分析 #

本地运行客户端组件的API调用逻辑正常，但执行npm run build时，/people路径导出报错，移除API调用后构建恢复正常。核心原因是静态构建阶段的环境特性与客户端运行环境存在差异，导致API请求或错误处理逻辑触发异常。

解决方案 #

1. 修正API请求路径 #

你当前使用的"people_api"是不完整的相对路径，构建时无法正确解析：

• 如果是调用本地App Router API路由，需使用完整相对路径，比如你的API路由文件在app/api/people/route.ts，则请求路径改为"/api/people"；
• 确认API路由文件的目录结构和命名符合Next.js 13要求（必须在app/api下，且文件名是route.ts/js）。

修正后的请求代码示例：

const response = await fetch("/api/people", {
  method: "GET",
});

2. 将页面改为动态渲染 #

Next.js构建时会默认静态渲染页面，此时客户端组件的fetch请求会在Node.js环境中执行，而本地API服务未启动，导致请求失败。可强制页面动态渲染：
在/people/page.tsx文件顶部添加动态渲染配置：

export const dynamic = "force-dynamic";

这样构建时不会预渲染该页面，API请求只会在用户访问页面时在浏览器环境中执行。

3. 替换浏览器专属的错误处理逻辑 #

你代码中使用的alert(error)是浏览器API，构建阶段（Node.js环境）不存在该方法，会触发报错：
将错误处理改为兼容Node.js和浏览器的方式，比如：

catch (error) {
  console.error("获取人员数据失败:", error);
  // 也可以设置错误状态，在页面上展示友好提示
  // setErrorMsg("加载数据失败，请稍后重试");
}

4. 确认客户端组件标识 #

确保你的组件已添加客户端组件指令，在组件文件顶部声明：

"use client";

Next.js 13 App Router默认是服务器组件，只有添加该指令才会在客户端运行，useState和useEffect才能正常工作（你本地运行正常大概率已添加，但建议再次确认）。

内容的提问来源于stack exchange，提问作者Łukasz Madejski