NextJs部署后出现404但本地开发正常，求助解决方案

一、路由刷新404的根本原因 #

静态导出的Next.js会为每个路由生成单独的HTML文件（比如/about对应out/about/index.html），但部署时如果服务器未配置回退到对应路由的HTML文件，刷新非根路由时服务器找不到对应文件就会返回404。而catchall_document: index.html会强制所有请求走首页，导致路由状态丢失。

二、针对DigitalOcean静态部署的修复方案 #

1. 配置DigitalOcean App Platform路由规则 #

静态导出的Next.js不支持自定义routes配置（这也是你添加后编译失败的原因），直接在DO控制台配置即可：

• 进入App的「Settings」→「Routes」
• 添加规则：
  • 路径：/*
  • 目标：/$1/index.html
  • 保留查询参数：开启
  • 重定向类型：Rewrite（不要选Redirect）
    这样服务器会把/about这类请求转发到/about/index.html，既解决404，又不会丢失路由状态。

2. 修正Next.js静态导出配置 #

在next.config.js中确认以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // 必须开启静态导出模式
  trailingSlash: true, // 生成带尾斜杠的文件结构，避免路径匹配异常
}

module.exports = nextConfig

执行yarn build后，out目录下每个路由都会生成对应的index.html，确保部署的是完整的out目录。

三、图片加载失败的修复 #

静态导出时需确保图片路径和配置正确：

• 使用Next.js Image组件时，必须开启images.unoptimized: true（静态导出不支持图片优化功能）：

const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true, // 静态导出必填，否则图片路径会异常
  },
}

• 直接用<img>标签时，确保路径为相对根路径（比如/images/logo.png，对应public/images/logo.png），不要用绝对URL。

四、Vercel部署的简化方案 #

如果部署到Vercel，无需额外配置路由：

• 确保next.config.js包含output: 'export'
• 推送代码到Vercel，平台会自动识别静态站点并处理路由回退逻辑。

注意事项 #

• 静态导出的Next.js不支持getServerSideProps和getInitialProps，需替换为getStaticProps或客户端数据获取方式，否则编译会失败。
• 不要给静态导出的Next.js配置routes字段，该配置仅适用于非静态导出的Server/Edge模式。

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