Next.js静态导出后动态路由刷新404问题求助

问题原因 #

• 静态导出（next export）只会生成预渲染的静态HTML文件。对于pages/post/[id].tsx这种动态路由，如果你没通过getStaticPaths指定具体的id列表，导出时不会生成/post/1、/post/2这类实际的HTML文件，只会生成一个占位的动态模板文件。
• serve这类静态服务器是基于文件系统路径响应请求的。直接访问/post/1时，服务器会去查找post/1/index.html或post/1.html，但这些文件不存在，所以返回404。而通过Next.js的Link组件跳转时，是客户端路由在本地处理，不会向服务器发送请求，因此能正常显示页面。

解决办法 #

1. 用getStaticPaths预生成所有动态页面

如果你的文章id是可提前获取的（比如从数据库或API拉取全量id列表），可以在[id].tsx里配置getStaticPaths，让Next.js在导出时为每个id生成对应的静态HTML文件：

export async function getStaticPaths() {
  // 从你的数据源获取所有文章id
  const res = await fetch('https://your-api-domain/posts');
  const posts = await res.json();
  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));
  
  return { paths, fallback: false }; // fallback设为false表示只生成指定路径的页面
}

export async function getStaticProps({ params }) {
  // 根据id获取对应文章数据
  const res = await fetch(`https://your-api-domain/posts/${params.id}`);
  const post = await res.json();
  
  return { props: { post } };
}

执行next build && next export后，out目录下会生成post/1.html、post/2.html等文件，此时用serve部署就能正常访问和刷新了。

2. 配置静态服务器的 fallback 路由

如果文章id无法提前预知（比如用户动态生成内容），可以让静态服务器把所有未匹配到文件的请求转发到index.html，交给Next.js客户端路由处理：

• 创建serve.json配置文件：

{
  "rewrites": [
    { "source": "**", "destination": "/index.html" }
  ]
}

• 运行部署命令：serve -c serve.json out（假设导出目录是out）
  这样直接访问或刷新/post/1时，服务器会返回首页的HTML，客户端路由会解析路径并渲染对应的动态页面。

3. 改用哈希路由（不推荐）

把路由模式改成哈希模式（比如/#/post/1），此时所有请求都指向首页，由客户端路由处理哈希部分。但这种方式会影响SEO，仅适用于不需要搜索引擎收录的站点。

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