Next.js导出静态站点后动态页面刷新404的解决方法

本地运行Next.js项目时，动态页面刷新正常，但执行next export导出静态站点并部署out文件夹后，刷新带参数的动态页面（比如/client/[id]）会出现404错误，且不想放弃静态导出的方式，可通过以下两种方案解决：

方案一：启用静态生成的fallback模式（推荐） #

Next.js 9.3+支持在静态生成时配置fallback，让未预渲染的动态路径自动生成静态页面，同时保留静态导出的特性。

修改你的动态页面代码（比如pages/client/[id].js），添加getStaticPaths和getStaticProps：

import { Box } from '@mui/material'
import React from 'react'
import View from 'src/views/client/View'

// 配置预渲染的路径，可从API或数据库获取已知的id列表
export async function getStaticPaths() {
  return {
    // 示例：预渲染id为1和2的页面
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    // 启用fallback，未预渲染的路径会生成占位页，客户端加载后自动生成静态文件
    fallback: true,
  }
}

// 根据id获取页面所需数据
export async function getStaticProps({ params }) {
  // 替换为你的实际数据获取逻辑，比如从API拉取客户端信息
  const clientData = await fetch(`https://your-api.com/clients/${params.id}`).then(res => res.json())

  return {
    props: {
      clientId: params.id,
      clientData,
    },
    // 可选：设置页面自动重新生成的时间（单位：秒），实现增量静态再生
    revalidate: 60,
  }
}

const ClientView = ({ clientId, clientData }) => {
  // 直接从props获取id，无需再用useRouter监听
  return (
    <Box>
      <View id={clientId} data={clientData} />
    </Box>
  )
}

export default ClientView

原理说明 #

• fallback: true会让Next.js为未预渲染的路径生成一个轻量的占位静态页
• 用户首次访问未预渲染的路径时，客户端会先加载占位页，同时Next.js在后台生成对应的完整静态页面，下次访问直接返回静态文件
• 既保留了静态导出的优势，又解决了动态路径刷新404的问题，还能兼顾SEO

如果你的动态路径完全没有已知的id（无法预渲染任何路径），可以把fallback设为'blocking'，首次访问时服务器会先渲染页面再返回静态文件，后续访问直接使用静态文件。

方案二：配置服务器路由重写 #

如果不想修改代码，可通过部署服务器的路由重写规则，将所有请求指向index.html，让Next.js的客户端路由接管路径解析。

不同服务器的配置示例 #

• Nginx：在配置文件中添加规则

location / {
  try_files $uri $uri/ /index.html;
}

• Netlify：在项目根目录的public文件夹下创建_redirects文件，内容如下

/*    /index.html   200

• Apache：在.htaccess文件中添加

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

原理说明 #

所有请求最终都会加载index.html，Next.js的客户端路由会解析URL中的参数（比如id），然后渲染对应的动态页面，从而避免刷新时出现404。这种方式适合完全动态的路径，但SEO表现略逊于方案一，因为初始页面需要客户端渲染。

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