Next.js中使用next-connect实现子路由统一匹配问题咨询

你遇到的404问题和next-connect本身无关，是Next.js Pages Router的API路由默认匹配规则导致的：pages/api/tours/index.js默认仅能精确匹配/api/tours路径，所有下级子路径不会触发该文件的逻辑，自然返回404。

具体操作步骤 #

• 第一步：重命名路由文件
  将pages/api/tours/index.js修改为pages/api/tours/[[...slug]].js，这是Next.js Pages Router的可选捕获所有路由段语法，可同时匹配/api/tours、/api/tours/top-5-cheap、/api/tours/123等所有/api/tours前缀的路径，无需修改你已有的next-connect路由逻辑。
• 第二步：补充动态路由匹配（可选）
  如果你需要处理/api/tours/:id这类带动态参数的路由，直接在现有mainRoute的链式调用中补充对应规则即可，你已经开启了attachParams: true，可以直接从req.params获取参数：

mainRoute
  .get("/:id", (req, res) => {
    res.end(`当前请求的tour ID为：${req.params.id}`)
  })
  // 保留你原有的其他路由规则
  .use("/top-5-cheap", subRoute1)
  .use("/stats", subRoute2)
  .use("/monthly-plan", subRoute3)
  .get((req, res) => { res.end("api/tours") })

• 第三步：重启开发服务器
  修改路由文件名后需要重启Next.js开发服务，新的路由匹配规则才会生效。

注意：该方案兼容Next.js 9.2及以上所有Pages Router版本，无需额外安装依赖。

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