Next.js rewrites提取查询参数实现路径重定向的配置与报错解决

Next.js 路由配置（rewrites/redirects）的source字段仅支持匹配URL的路径部分，不允许直接拼接查询参数做规则匹配。你把?id=xxx写在source字符串里时，路由解析器会把整段内容当成路径格式解析，碰到?符号就会抛出你遇到的解析失败报错。
另外两个核心认知需要明确：

• 如果你需要实现浏览器地址栏从/home?id=123qwert实际跳转到/home/123qwert，应该使用redirects方法而非rewrites：rewrites是服务端内部的路由转发，不会修改浏览器显示的URL，完全达不到你要的跳转效果。
• Next.js 匹配、提取查询参数需要使用专属的has配置项，不能把查询规则塞在source里。

在next.config.js中编写如下配置即可实现预期效果：

async redirects() {
  return [
    {
      // 精确匹配纯路径 /home
      source: '/home',
      // 匹配携带指定查询参数的请求
      has: [
        {
          type: 'query',
          key: 'id',
          // 通过正则捕获组把id参数值存为可复用的动态变量cmsId
          value: '(?<cmsId>.*)'
        }
      ],
      // 映射到已配置的动态路由路径
      destination: '/home/:cmsId',
      // 使用308永久重定向，符合URL规范化的SEO要求
      permanent: true
    }
  ]
}

• 所有访问/home?id=任意值的请求，会被自动308重定向到/home/对应任意值，和你已经创建的/home/[id].js动态路由完全打通，不需要修改页面业务代码。
• source仅精确匹配纯/home路径，不会误匹配/home/xxx这类已经是路径参数格式的请求，不会触发循环重定向。

如果你确实需要做服务端内部转发（也就是保留浏览器地址栏的/home?id=xxxURL不变化，仅在服务端返回/home/[id].js的页面内容），可以把上面的redirects方法替换为rewrites，去掉permanent配置项即可：

async rewrites() {
  return [
    {
      source: '/home',
      has: [
        {
          type: 'query',
          key: 'id',
          value: '(?<cmsId>.*)'
        }
      ],
      destination: '/home/:cmsId'
    }
  ]
}

• 可以根据id参数的实际格式，调整has里的正则规则：如果id是纯字母数字组合，可以把value修改为'(?<cmsId>[a-zA-Z0-9]+)'，提升匹配精度，避免误匹配无关参数。
• 308重定向会保留原始请求的请求方法，不会把POST请求强制改成GET，适配大部分线上跳转场景。

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