Next.js i18n动态路由getStaticPaths同层级slug命名冲突解决方案求助

报错原因 #

Next.js Pages路由有明确规则：同层级下不允许存在多个命名不同的动态路由段。你在根目录下同时定义了[news]和[about]两个动态路由，框架无法判断根路径下的任意slug应该匹配哪个路由，因此触发冲突。

解决方案 #

方案1：配置next.config.js重写规则（推荐，改动最小）

无需修改现有页面业务逻辑，只需新增路径映射规则即可实现自定义多语言路径：

1. 首先将原动态路由页面改为固定命名页面：
   • 把/pages/[news]/index.js改为/pages/news/index.js
   • 把/pages/[about].js改为/pages/about.js
2. 在next.config.js中添加rewrites配置：

module.exports = {
  i18n: {
    locales: ['en', 'it', 'es'],
    defaultLocale: 'en',
  },
  async rewrites() {
    return [
      // 关于我们页多语言路径映射
      {
        source: '/about-us',
        destination: '/about',
        locale: false,
      },
      {
        source: '/it/chi-siamo',
        destination: '/it/about',
        locale: false,
      },
      {
        source: '/es/sobre-nosotros',
        destination: '/es/about',
        locale: false,
      },
      // 新闻页多语言路径映射
      {
        source: '/news',
        destination: '/news',
        locale: false,
      },
      {
        source: '/it/novitta',
        destination: '/it/news',
        locale: false,
      },
      {
        source: '/es/noticas',
        destination: '/es/news',
        locale: false,
      },
    ]
  },
}

方案2：统一根层级动态路由命名

如果不想修改框架配置，可以合并两个动态路由为一个通用路由，在内部做路由匹配：
新建/pages/[slug].js作为根层级唯一动态路由，代码示例如下：

// 引入拆分的业务页面组件
import NewsPage from './news/index'
import AboutPage from './about'

export const getStaticPaths = ({ locales }) => {
  return {
    paths: [
      // 新闻页路径
      { params: { slug: 'news' }, locale: 'en' },
      { params: { slug: 'novitta' }, locale: 'it' },
      { params: { slug: 'noticas' }, locale: 'es' },
      // 关于我们页路径
      { params: { slug: 'about-us' }, locale: 'en' },
      { params: { slug: 'chi-siamo' }, locale: 'it' },
      { params: { slug: 'sobre-nosotros' }, locale: 'es' },
    ],
    fallback: false,
  }
}

export const getStaticProps = async ({ params, locale }) => {
  // 建立slug与页面类型的映射
  const pageMapping = {
    news: 'news',
    novitta: 'news',
    noticas: 'news',
    'about-us': 'about',
    'chi-siamo': 'about',
    'sobre-nosotros': 'about',
  }
  const currentPage = pageMapping[params.slug]
  // 可根据页面类型单独拉取对应业务数据
  return {
    props: {
      pageType: currentPage,
      // 其他业务参数
    }
  }
}

export default function DynamicRoutePage({ pageType, ...props }) {
  switch(pageType) {
    case 'news':
      return <NewsPage {...props} />
    case 'about':
      return <AboutPage {...props} />
    default:
      return null
  }
}

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