Next.js 15 App Router拦截路由过度匹配问题求助

你的问题核心是动态路由[post]的匹配范围过广，导致导航到/contact、/gallery这类静态路由时被模态框拦截路由触发，但直接访问静态路由时因静态路由优先级更高能正常显示。可以通过限制动态路由的匹配规则来解决：

方案1：基于文章ID格式设置匹配正则 #

如果你的文章ID是固定格式（比如仅字母数字、长度3-10位），可在动态路由的页面文件中导出config对象，用matcher指定匹配规则：

1. 修改app/[post]/page.js，添加配置：

export const config = {
  // 匹配3-10位字母数字组成的路径段，可根据实际ID格式调整长度
  matcher: ['/:post([a-zA-Z0-9]{3,10})']
};

2. 同样在app/@modal/(.)[post]/page.js中添加相同配置：

export const config = {
  matcher: ['/:post([a-zA-Z0-9]{3,10})']
};

这样只有符合格式的路径（如/rand123）会被动态路由和模态框拦截路由匹配，静态路由不会触发模态框。

方案2：排除指定静态路由 #

如果文章ID格式不固定，可通过正则负向预查排除已知的静态路由：

在两个动态路由页面文件中导出：

export const config = {
  matcher: [
    // 排除contact、gallery、tags等静态路由，其余路径段匹配[post]
    '/:post((?!contact|gallery|tags).*)'
  ]
};

原理说明 #

Next.js App Router中，动态路由优先级低于静态路由，但拦截路由的匹配逻辑会在导航时优先检查动态路由规则。通过matcher配置限制动态路由的匹配范围，就能避免模态框拦截静态路由的导航请求，同时保留对文章路径的拦截功能。

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