在DigitalOcean App Platform部署Next.js静态网站后出现404页面未找到

按以下步骤逐步排查：

1. 验证本地静态导出是否正常 #

• 先确认Next.js版本对应的导出配置：
  • Next.js 13+：在next.config.js中添加output: 'export'配置，然后执行npm run build，会自动生成out文件夹。
  • 旧版本Next.js：在package.json的scripts中添加"export": "next export"，执行npm run build && npm run export生成out文件夹。
• 检查out文件夹下是否存在index.html文件，然后用静态服务器（比如npx serve out）本地访问，确认根路径能正常打开。如果本地静态访问也404，问题出在导出配置，和DO平台无关。

2. 检查DigitalOcean的构建与输出配置 #

• 登录DO App控制台，进入你的应用配置：
  • 确认Build Command设置正确：
    • Next.js 13+：npm run build
    • 旧版本：npm run build && npm run export
  • 确认Output Directory设置为out（对应本地生成的静态文件目录）。
• 查看部署日志，检查构建过程中是否有报错（比如依赖安装失败、导出命令执行出错），日志里的错误信息是排查关键。

3. 确认部署后的文件结构 #

• 在DO App控制台的「Deployments」页面，找到已完成的部署，查看部署详情里的文件列表，确认out目录下存在index.html，且路径正确。如果文件缺失，说明构建步骤没正确生成静态文件。

4. 排查页面与路由逻辑问题 #

• 检查pages/index.tsx是否有错误的重定向、路由跳转逻辑，或者getStaticProps中是否有异常导致页面无法生成。
• 确认_app.tsx中没有全局的路由拦截、错误的组件包裹逻辑，避免影响首页渲染。

5. 检查平台路由规则 #

• DigitalOcean静态站点默认以输出目录下的index.html作为首页，如果你的输出目录配置错误，平台无法找到首页文件就会返回404。再次核对Output Directory的路径是否和本地生成的静态目录一致。

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