Next-i18next/react-i18next 如何实现位置随语言变化的Link组件插值

原方案存在的核心问题 #

• 多语言文本语序存在天然差异，靠手动拆分文本、按语言硬切顺序的临时方案可维护性极差
• 引入Trans组件后，客户端切换语言时翻译不生效，仅页面刷新后才能加载正确内容，未刷新状态下会直接展示组件内的原始占位文本

踩坑根因 #

1. Trans组件索引映射错位
   Trans组件默认按children的顺序从0开始计数映射翻译字符串里的标签，之前的写法中没有理清子元素的实际顺序，翻译文件里写的标签索引和实际组件位置不匹配，导致渲染结果混乱。
2. 子组件嵌套写法不规范
   旧写法中把t("dataPolicy")的返回值作为LinkText的children传入Trans，这种写法会在Trans组件首次挂载时就直接渲染文本内容，不会和翻译字符串做联动替换，一旦资源加载时序不对，就会直接展示原始占位内容。
3. 客户端资源加载时序问题
   next-i18next在客户端切换语言时，如果翻译资源没有提前加载到内存，Trans组件会直接降级渲染children内的原始文本，不会等待资源加载完成后重新渲染，最终出现“只有刷新才出正确翻译”的现象。

正确实现步骤 #

1. 用官方推荐的components传参方式映射插值组件 #

不要把需要插值的组件直接嵌套在Trans的children里，避免索引识别混乱。把自定义组件作为components数组传入，数组下标和翻译字符串里的标签索引一一对应，这种方式不需要靠children的顺序猜索引，稳定性更高。
示例代码：

import Link from 'next/link'
import { Trans, useTranslation } from 'next-i18next'

// 封装可被Trans识别的链接组件，Trans会自动将对应位置的文本注入组件的children中
function TransLink({ href, children }) {
  return <Link href={href}>{children}</Link>
}

export default function PolicyAgreementCard() {
  const { t } = useTranslation('common')

  return (
    <Trans
      i18nKey="policyAccept"
      // 数组下标和翻译中的标签索引一一对应
      components={[
        <></>, // 索引0：占位，承接翻译里的普通文本
        <TransLink href="/data-policy" />, // 索引1：对应翻译中的<1>标签
        <></> // 索引2：占位，承接翻译里的普通文本
      ]}
    />
  )
}

2. 按语言调整翻译文件语序 #

对应不同语言的语序差异，只需要在翻译JSON里调整带链接标签的位置即可，不需要修改业务代码。
示例翻译配置：

• 英文（en/common.json）：

{
  "policyAccept": "I agree to the <1>Data Policy</1> and consent to data processing"
}

• 德语（de/common.json）：

{
  "policyAccept": "Ich akzeptiere die <1>Datenschutzerklärung</1> und stimme der Datenverarbeitung zu"
}

哪怕遇到语序差异极大的语言，只需要调整<1>标签在句子里的位置，业务代码不需要做任何改动。

3. 解决客户端翻译不刷新的问题 #

要让Trans组件在客户端切换语言后正常重渲染，需要完成两个配置调整：

• 在页面的服务端获取逻辑中，通过serverSideTranslations提前将当前语言的翻译资源注入页面初始Props，保证客户端hydration阶段i18n实例已经有完整的翻译资源，不会直接降级渲染原始children内容
• 不要把翻译文本、组件直接作为children传给Trans，所有翻译内容都从i18n资源中读取，通过components参数传入需要插值的自定义组件，避免资源未加载时直接展示占位文本

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