Next.js静态路由与动态路由重叠被覆盖的技术问题咨询

路由覆盖的根本原因 #

Next.js默认规则下静态路由优先级高于同路径的动态路由，出现覆盖问题是以下几个原因共同导致的：

1. 自定义路由生成逻辑存在bug
   你封装的createRoute函数内部使用了include、exclude两个变量，但函数入参没有定义这两个字段，导致动态路由中配置的exclude: ['cs']完全没有生效，动态路由的getStaticPaths生成了包含/cz/cz的路径列表，Next.js会优先使用已经预渲染好的动态路由内容响应/cz/cz请求，不会再匹配静态路由文件。
2. 跳转属性使用错误
   Next.js原生next/link组件使用href属性定义跳转路径，你代码中的<Link to="/">是React Router的语法，如果混用了两套路由系统，会完全绕过Next.js的文件路由匹配规则，导致跳转路径匹配错误。
3. 跳转目标和预期不符
   你预期从捷克语静态页跳转到当前语言的首页，对应路径应该是/cz/cz，但你跳转的目标是根路径/，根路径本身就不会匹配到pages/cz/cz/index.js对应的静态路由，只会匹配到动态路由的根路径配置。

关于绝对匹配配置 #

Next.js默认的文件路由就是精确匹配规则，不需要额外配置。如果自定义路由或者重写规则覆盖了默认优先级，可以在next.config.js中配置rewrites或者redirects规则，手动指定路径的匹配优先级，这类配置的优先级高于文件系统路由。

解决方案 #

• 修复createRoute函数的入参问题，补全include和exclude的参数定义，确保动态路由生成路径时正确排除cs locale，不会生成/cz/cz对应的动态路由：

export default function createRoute({
  path,
  otherLocales,
  getPathParams,
  locale,
  include = [],
  exclude = [],
} = {}) {
  const locales = _.without(include, ...exclude);
  return {
    getStaticPaths: createGetStaticPaths({
      locales,
      getPathParams,
    }),
    getStaticProps: createGetStaticProps({
      path,
      locale,
      locales,
      otherLocales,
    }),
  };
}

调用动态路由的createRoute时传入完整的include参数，确保排除逻辑正常生效。

• 统一使用Next.js的路由能力，把跳转组件替换为next/link，跳转捷克语静态首页的路径改为对应实际路径：

import Link from 'next/link'

<Link href="/cz/cz">首页</Link>

如果需要根路径根据当前locale自动跳转到对应语言的首页，可以在根路径的pages/index.js中添加服务端重定向逻辑，或者配置Next.js的i18n能力实现自动跳转。

• 如果需要强制锁定路径的匹配优先级，可以在next.config.js中添加rewrites规则，明确指定/cz/cz优先匹配静态路由：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/cz/cz',
        destination: '/cz/cz',
      },
    ]
  },
}

• 上线前可以打印动态路由getStaticPaths返回的paths数组，确认没有包含/cz/cz路径，避免预渲染内容冲突。

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