Next.js应用在AWS Amplify部署成功但站点无法访问问题排查

下面是针对这个问题的具体排查步骤，按优先级排序：

1. 先验证Amplify默认域名是否能访问 #

先试试用Amplify自动生成的默认域名（比如your-app-id.amplifyapp.com）打开Next.js应用：

• 如果默认域名能正常访问：问题肯定出在原域名的绑定或DNS解析上，直接跳到第2步。
• 如果默认域名也打不开：说明Next.js的构建或部署本身有问题，往下看第3到第5步。

2. 原域名绑定与DNS解析排查 #

• 检查Amplify域名管理：进入Amplify控制台的「Domain management」，确认原域名已经分配到当前Next.js项目的目标分支，状态显示「Active」，没有pending或error标记。
• 验证DNS记录：用nslookup your-domain.com或dig your-domain.com命令，检查返回的CNAME/A记录是不是指向Amplify给Next.js应用分配的CloudFront域名，而不是旧React应用的地址。
• 检查HTTPS证书：如果用了HTTPS，确认Amplify自动生成的证书状态是「Issued」，并且覆盖了你用的所有子域名（如果有的话）。

3. Next.js构建配置检查 #

• 构建命令和输出目录要匹配渲染模式：
  • 静态导出（SSG）：构建命令必须是next build && next export，输出目录设为out。
  • SSR/ISR：构建命令用npm run build，输出目录设为.next，同时要确保Amplify Hosting开了「Server-side rendering support」。
• Node版本要对应：Next.js 13+要求Node.js 16.8以上，在Amplify的「Build settings」里直接设置版本号，或者在构建脚本里加nvm use 18（根据你的Next.js版本选合适的）。
• 环境变量：确认NEXT_PUBLIC_开头的公开变量都在Amplify的「Environment variables」里配置好了，缺变量可能导致页面白屏或者功能失效。

4. 缓存问题排查 #

• 浏览器强制刷新：按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac），强制加载最新资源，排除本地缓存的旧React内容。
• 清Amplify CDN缓存：在Amplify控制台的「App settings」→「Cache management」里点「Invalidate cache」，让CDN重新拉取新部署的文件。
• 看构建日志的上传阶段：检查日志里的「Uploading artifacts」部分，确认.next或out目录下的所有文件都上传成功了，没有报错或遗漏。

5. 分支与路由排查 #

• 确认部署分支：看Amplify的「Deployments」页面，最新部署的分支是不是你放Next.js代码的分支，别部署错了旧React的分支。
• 检查Next.js路由：如果用App Router，确保app目录结构符合规范；用Pages Router的话，pages目录里的路由文件不能有语法错误。构建日志里如果有「Duplicate routes」之类的警告，必须先修复。

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