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

ncecgwcz 于 2023-11-18 发布在其他

关注(0)|答案(2)|浏览(135)

在Nextjs 12中，使用旧的Pages router，我可以写pages/[...urlParts]/index.js，这将只捕获页面路由（正是需要的）。但现在在Nextjs 13中，我使用他们的新App router，我的app/[...urlParts]/page.js路由捕获所有内容，包括内部Nextjs请求，如/_next/static/css/app/ReactToastify.css.map。
有没有可能使用我的页面处理程序来处理除了特定URL之外的所有内容？也许这里有一些方法可以告诉Nextjs使用_next/...服务链接的默认处理程序，但是要保留我的页面的所有部分？
现在我使用/app/pages/[...urlParts]/page.js结构，但这是一个临时的解决方案，因为我不需要在我的页面url中使用pages/部分。
也许我应该更明确我的目标。我正在做一个基于url和数据库数据生成页面的项目。所以我需要有机会：
1.“catch-all”每个可能的路由（除了API/.，_next/.等等）。我需要为所有异常保留默认的Nextjs处理程序。
1.解析提供的url
1.在我的数据库中搜索相关数据
1.生成页面并返回生成的页面结果
此外，我需要使用一些应用程序路由器的可能性（如部分页面与单独的缓存），所以我不能正常切换到旧的页面路由器。

next.js

来源：https://stackoverflow.com/questions/77303301/app-router-how-to-catch-all-pages-requests-in-nextjs-13

2条答案

按热度按时间

vq8itlhq1#

捕获除特定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],
};

型

赞(0）回复(0）举报 2023-11-18

cyej8jka2#

将Next.js升级到最新版本。我已经用Next.js 14.1测试过了，它运行得很好。

赞(0）回复(0）举报 2023-11-18

我来回答

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

2条答案

相关问题

热门标签

最新问答