Next.js中如何自定义i18n多语言标识在URL路径中的位置

完全可以实现，多语言标识的位置没有强制限制，只需要调整路由层的匹配规则即可，核心逻辑和主流技术栈的实现方案如下：

• 核心原理
  i18n的多语言切换逻辑和URL路径的结构完全解耦，只需要在路由解析阶段从你指定的路径位置提取出语言标识，再传入i18n实例完成语言切换即可，不需要修改i18n本身的翻译逻辑。

• 主流框架实现示例

  1. Vue 技术栈（vue-i18n + vue-router）
     直接修改路由配置里的占位符位置，在路由守卫中提取语言参数即可：

  const routes = [
    {
      path: '/business/:lang/transaction',
      component: TransactionPage,
      beforeEnter: (to, from, next) => {
        const supportedLangs = ['en', 'zh-CN', 'ja']
        const targetLang = to.params.lang
        if (supportedLangs.includes(targetLang)) {
          i18n.global.locale.value = targetLang
          next()
        } else {
          // 不支持的语言 fallback 到默认英文
          next('/business/en/transaction')
        }
      }
    }
  ]
  

  2. React 技术栈（react-i18next + react-router）
     调整路由路径的参数位置，在页面组件内获取参数切换语言即可：

  // 路由配置
  <Route path="/business/:lang/transaction" element={<TransactionPage />} />
  
  // TransactionPage 组件内逻辑
  import { useParams } from 'react-router-dom'
  import { useTranslation } from 'react-i18next'
  
  function TransactionPage() {
    const { lang } = useParams()
    const { i18n } = useTranslation()
    useEffect(() => {
      if (['en', 'zh-CN', 'ja'].includes(lang)) {
        i18n.changeLanguage(lang)
      }
    }, [lang])
    return <div>交易页内容</div>
  }
  

  3. Next.js 技术栈
     直接修改目录结构即可，将[lang]动态段从一级目录移到business目录下：
     原目录结构：app/[lang]/business/transaction/page.js
     修改后目录结构：app/business/[lang]/transaction/page.js
     内置的i18n能力或者next-i18next插件都会自动识别对应位置的语言参数，无需额外配置。

• 注意事项

  • 需提前校验提取到的语言参数是否在你支持的语言列表内，避免无效参数导致的报错
  • 调整路由规则后要同步修改全站的跳转链接生成逻辑，避免出现404
  • 如果有多语言SEO需求，需要同步调整页面head中的hreflang标签配置，保证搜索引擎正确识别多语言页面对应关系

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