应用路由器。如何在 Nextjs 13 中捕获所有页面请求？

Question

在 Nextjs 12 中，使用旧的 Pages 路由器，我可以编写pages/[...urlParts]/index.js，并且只会捕获页面路由（正是所需要的）。但现在在 Nextjs 13 中，我使用他们的新应用程序路由器，我的app/[...urlParts]/page.js路由捕获所有内容，包括内部 Nextjs 请求，例如/_next/static/css/app/ReactToastify.css.map.

是否可以将我的页面处理程序用于除特定网址之外的所有内容？也许这里有一些方法可以告诉 Nextjs 使用_next/...服务链接的默认处理程序，但保留页面的包罗万象的段？

现在我使用/app/pages/[...urlParts]/page.js结构，但这是一个临时解决方案，因为我不需要pages/页面网址中的部分。

也许我应该进一步明确我的目标。我正在开发一个根据 url 和数据库数据生成页面的项目。所以我需要有机会：

1. “捕获所有”所有可能的路由（除了 api/...、_next/... 等）。我需要为所有异常保留默认的 Nextjs 处理程序。
2. 解析提供的 url
3. 在我的数据库中搜索相关数据
4. 生成页面并返回生成的页面结果

另外，我需要使用一些应用程序路由器的可能性（例如具有单独缓存的部分页面），因此我通常无法切换到旧的页面路由器。

Answer 1

捕获除特定 URL 之外的所有内容 ( _next/...)。

创建这样的路线：

app/[...urlParts]:(?!_next/.*).*$

这将匹配所有不以 开头的内容_next/。

创建文件夹：

mkdir -p app/[...urlParts]:\(!_next\)

您还可以通过创建中间件来实现这一点。

function urlVerifier(req, res, next) {
  if (req.url.startsWith('_next/')) {
    return next();
  }

  next();
}

注册中间件 Nextjs 应用程序。

module.exports = {
  middleware: [urlVerifier],
};