Next.js如何实现动态路由？现有路由配置刷新出现404该如何解决

问题产生原因 #

你当前使用了Link组件的as属性实现路由地址掩码，客户端跳转时Next.js走前端路由逻辑，仅修改地址栏显示内容，实际渲染的仍然是href属性指向的/categorypage页面，因此跳转功能正常。
但触发页面刷新时，浏览器会直接向后端服务请求as属性对应的/${data.categoria}/${data2.categoria}路径，你的项目pages目录下没有与该路径匹配的文件结构，服务端无法找到对应资源，因此返回404错误。

解决方案 #

分两种实现路径可选：

方案1：适配动态路由文件结构（推荐） #

• 如果你用的是Pages Router：
  1. 在pages目录下创建层级动态路由文件：pages/[c1]/[c2].js（或tsx），该文件会自动匹配所有/一级分类/二级分类格式的路径
  2. 简化Link组件写法，无需再用as做路由掩码：

  <Link href={`/${data.categoria}/${data2.categoria}`}>
    <a>{data2.categorianame}</a>
  </Link>
  

  3. 若你使用next export做静态站点导出，还需在next.config.js中配置exportPathMap预生成所有动态路由对应的静态文件，或开启fallback: true规则。
• 如果你用的是App Router：
  1. 在app目录下创建路由文件夹结构：app/[c1]/[c2]/page.js（或tsx）
  2. Link组件写法和上述Pages Router的写法一致即可。

方案2：配置路由重写（无需调整现有页面结构） #

如果你不想改动现有的pages/categorypage.js文件结构，可以通过配置重写规则实现路径映射，在next.config.js中添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/:c1/:c2',
        destination: '/categorypage?c1=:c1&c2=:c2',
      },
    ]
  },
}

module.exports = nextConfig

配置后服务端收到/xxx/xxx格式的请求时，会自动内部转发到/categorypage页面处理，不会触发404。

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