Next.js 13.4.12部署AWS Amplify生产环境异常求助

API 探路者

2026-7-13

解决方案

针对「Application error: a server-side exception has occurred」错误

错误原因：Server Component中直接访问了Client Component导出的.propTypes属性，违反了Next.js 13 App Router的Server/Client组件边界规则。

解决步骤：

给所有需要在客户端运行的组件添加'use client'指令，明确区分Server和Client组件。
检查代码中是否存在类似import SomeComponent from 'xxx'; const types = SomeComponent.propTypes;的逻辑，将这类访问Client组件子属性的代码移到Client Component内部，或者改为仅导入组件本身，不访问其导出的属性。
若使用第三方UI库，确认库是否支持Next.js App Router，若存在不兼容的propTypes引用，考虑升级库版本或替换为兼容的替代库。

错误原因：react-dom版本与Next.js版本不兼容，或依赖安装时出现版本冲突，导致Amplify部署环境中找不到react-dom/server.edge路径。

解决步骤：

查看项目package.json，确保react和react-dom的版本与当前Next.js版本要求一致（例如Next.js 13.x通常要求react@18.2.0、react-dom@18.2.0），手动锁定版本号：
```
"dependencies": {
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "next": "13.x.x" // 替换为你使用的具体版本
}
```
删除本地的node_modules、package-lock.json（或yarn.lock），重新执行npm install（或yarn install），确保依赖版本统一。
检查Amplify构建配置中的Node.js版本，确保与本地开发环境使用的Node.js版本一致（可在Amplify控制台的构建设置中调整），避免版本差异导致依赖安装异常。
排查第三方依赖，若有库内部错误引用react-dom/server.edge，升级该库到最新稳定版，或移除该库并寻找替代方案。