如何在next.js+next-i18n项目中修改JSON翻译文件指定字符的颜色？

推荐方案：使用next-i18next内置<Trans>组件（无安全风险，适配多语言逻辑） #

• 第一步：调整翻译JSON文件，将需要着色的文本片段用自定义占位标签包裹

{
  "test": "Hi, <highlight>this string value will change</highlight>. Thank you"
}

• 第二步：组件中替换原t()调用，改用<Trans>组件，绑定占位标签对应的带样式元素

import { Trans } from 'next-i18next';

// 组件逻辑内直接使用
function YourComponent() {
  return (
    <Trans 
      i18nKey="test"
      components={{
        // 自定义highlight标签对应的渲染元素，可任意设置样式
        highlight: <span style={{ color: '#f5222d', fontWeight: 600 }} />
      }}
    />
  )
}

备选方案：内嵌HTML标签 + 原生渲染（仅适用于翻译内容完全可控的场景，存在XSS注入风险） #

• 第一步：翻译JSON内直接写入带样式的HTML标签

{
  "test": "Hi, <span style='color: #f5222d; font-weight: 600;'>this string value will change</span>. Thank you"
}

• 第二步：调用t()方法后通过dangerouslySetInnerHTML属性渲染

<div dangerouslySetInnerHTML={{ __html: t('test') }} />

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