NextJS：优先匹配硬编码路由而非动态路由的实现方法

核心结论 #

不需要额外做任何配置，不管是 Pages Router 还是 App Router（Next.js 13+），Next.js 默认就会让硬编码的静态路由 pages/hello 优先级高于动态路由 pages/[slug]，二者可以明确区分，不会出现冲突。

匹配规则说明 #

Pages Router 官方默认的路由匹配优先级从高到低如下：

• 硬编码静态路由，例如 pages/hello.js
• 命名动态路由，例如 pages/[slug].js
• catch-all 全匹配动态路由，例如 pages/[...slug].js
• 自定义404路由

当你访问 /hello 路径时，Next.js 会优先命中静态路由 pages/hello 对应的页面，完全不会触发动态路由的逻辑，也不会将 hello 作为 slug 参数传递给动态路由。只有访问 /test、/demo 这类不存在对应静态路由的一级路径时，才会匹配到 pages/[slug] 动态路由。

特殊注意事项 #

如果你在 next.config.js 中配置了自定义 rewrites 规则，有可能会打乱默认的路由匹配优先级，这种情况只需将针对 /hello 的重写规则放在动态路径重写规则之前即可维持默认优先级。

内容的提问来源于stack exchange，提问作者Chillin N Billin