Next.js+i18next单条翻译含双变量：Link显示[object Object]问题

问题根源 #

你当前的写法混淆了React-i18next中普通文本插值和React组件插值的语法规则：

• 普通变量（如currentYear）需用{{变量名}}语法，对应Trans组件的values属性
• React组件（如Link）需用<key>或<索引>语法，对应Trans组件的components属性

之前你把React组件放到components里却用{{link}}引用，导致i18next将其当作普通变量解析，最终输出[object Object]。

修复方案 #

1. 修改i18n JSON翻译文件

将{{link}}替换为<link>，保留{{currentYear}}用于文本插值：

{
  "information": "© {{currentYear}} Sign In App Ltd is part of the <link> suite of brands providing global, cloud-based solutions to manage visitors, employees, workplaces and beyond."
}

2. 调整Footer组件的Trans组件用法

把currentYear移到values属性中，components仅保留React组件：

export default function Footer() {
  const { t } = useTranslation("layout-footer");
  const currentYear = new Date().getFullYear();

  return (
    <footer className='py-6 mt-20 border-t-[1px] border-opacity-50'>
      <p className='text-sm text-center mb-6'>{t("addresses")}</p>
      <p className='text-sm text-center mb-6'>
        <Trans
          i18nKey='information'
          t={t}
          values={{ currentYear }}
          components={{
            link: (
              <Link
                href='https://www.signinsolutions.com'
                className='text-green-600'
                rel='noreferrer'
                target='_blank'
              >
                Sign In Solutions
              </Link>
            ),
          }}
        />
      </p>
    </footer>
  );
}

替代方案（索引式引用） #

如果你习惯用数组索引引用组件，也可以采用这种写法：

• 翻译文件：

{
  "information": "© {{currentYear}} Sign In App Ltd is part of the <0> suite of brands providing global, cloud-based solutions to manage visitors, employees, workplaces and beyond."
}

• 组件代码：

<Trans
  i18nKey='information'
  t={t}
  values={{ currentYear }}
  components={[
    <Link
      href='https://www.signinsolutions.com'
      className='text-green-600'
      rel='noreferrer'
      target='_blank'
    >
      Sign In Solutions
    </Link>
  ]}
/>

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