NextJS 13带斜杠多参数正则重写失效（404）排查求助

核心失效原因 #

• 多余的has条件导致匹配逻辑冲突
  你同时定义了source路径参数和has查询参数条件，这意味着只有当请求URL同时包含路径参数和对应的cond/city/bld查询参数时，重写才会触发。但你的需求是将路径参数格式的URL重写到/detail，完全不需要依赖查询参数，has条件属于冗余配置，直接导致大部分符合路径格式的请求无法匹配规则，返回404。

• 正则表达式转义错误
  在source的cond规则里，你把分支符|转义成了\|，但NextJS使用的path-to-regexp库中，路径正则的分支符不需要转义，转义后\|会被当成字面量字符，导致只能匹配类似cond1\|cond2这种带反斜杠的路径值，而非你预期的cond1/cond2/cond3。

• 正则表达式的其他潜在问题

  • city规则里的[a-z\-?]+中，?是字面量字符，若你想表示可选的连字符，应改为[a-z\-]+（匹配1个及以上小写字母/连字符）或[a-z-]*（匹配0个及以上）；
  • bld规则里的\/无需转义，直接写/即可，path-to-regexp会正确处理路径中的斜杠匹配。

修复后的重写规则 #

{
  source: '/folder/:cond(cond1|cond2|cond3)/:city([a-z\-]+-ci)/:bld([a-zA-Z0-9/-]+)',
  destination: '/detail' // pages/detail/index.js 对应路由为 /detail，无需写 /detail/index
}

额外说明 #

• 若要在/detail页面获取路径参数，可在getServerSideProps或getStaticProps中通过context.params获取：

  // pages/detail/index.js
  export async function getServerSideProps(context) {
    const { cond, city, bld } = context.params;
    // 业务逻辑处理
    return { props: { cond, city, bld } };
  }
  

• NextJS 13 Pages Router的重写规则优先级是从上到下，确保该规则放在其他可能冲突的规则之前。

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