@adrai和@xec已经回答了这个问题，但我觉得还是太复杂了。
所以这个答案的简单版本是......在你的代码中使用这个：

import { Trans } from 'react-i18next'

<Trans i18nKey="common.greeting" />

在JSON中是这样的：

{
  "common": {
    "greeting": "We will see you at <strong>NEW YORK</strong> in the morning!"
  }
}

完整文档可在https://react.i18next.com/latest/trans-component上获得
我的版本是：

"i18next": "^20.6.0",
"react-i18next": "^11.11.4",

感谢@adrai在评论中给出了答案，我想我还是把它写在这里给以后的访问者看吧;
在https://react.i18next.com/latest/trans-component阅读完整文档
您可以使用react-i18next中的<Trans>组件

import { Trans } from 'react-i18next'

我假设“纽约”文本应该是动态的（容易替换），如果不是，你就不需要values部分。

<Trans i18nkey='common.greeting' values={{ city: 'NEW YORK' }}>
  We will see you at <strong>NEW YORK</strong> in the morning!
</Trans>

然后，在语言环境JSON文件中，您可以使用<N>作为索引号N处的JSX标记的占位符（在<Trans>标记中使用），并使用{{key}}作为任何动态值（如本例中的city）

{
  "common": {
    "greeting": "We will see you at <1>{{city}}</1> in the morning!"
  }
}

字符串从0开始被分割成索引部分，第一部分（索引0）是文本"We will see you at "，第二部分（索引1）是<strong>元素。
<Trans>组件内的文本仅在未找到翻译时用作后备，但<strong>标记将替换<1>占位符。

更新：根据文档，自版本10.4.0起，您还可以直接在文本中使用一些标记：['br', 'strong', 'i', 'p']，但从不嵌套，也没有属性。也可以参见Aleksandar Sadzak的回答。

从v11.6开始，它们具有列出组件的替代样式：
它们是例子：

<Trans
  i18nKey="myKey" // optional -> fallbacks to defaults if not provided
  defaults="hello <italic>beautiful</italic> <bold>{{what}}</bold>" // optional defaultValue
  values={{ what: 'world'}}
  components={{ italic: <i />, bold: <strong /> }}
/>

这可能是这样的：

<Trans 
  i18nkey='common.greeting' 
  defaults="We will see you at <bold>{{city}}</bold> in the morning!"
  values={{ city: 'NEW YORK' }}>
  components={{ bold: <strong /> }}  
/>

拆分句子会破坏翻译的目的，如果另一种语言要求拆分部分以不同的顺序怎么办？
另外，我不喜欢Trans组件，因为您需要在默认JSON和React代码中维护翻译。
我建议使用嵌入式HTML，但是如果您在翻译中有用户输入要小心，因为它应该手动转义。
在您的情况下，由于您没有任何用户输入，只需执行以下操作：
Json：

{
  "common": {
    "greeting": "We will see you at <b>NEW YORK</b> in the morning!"
  }
}

React：

<div dangerouslySetInnerHTML={{__html: translate("common.greeting")}} />

对于任何在2023年使用next-18next解决此问题的人。我使用：

"i18next": "^22.4.9",
  "next": "13.1.6",
  "next-i18next": "^13.1.5",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-i18next": "^12.1.5"

翻译文件

public/locales/<locale>/common.json

{
  "replacedValue": "some replaced value", 
  "anotherReplacedValue": "another replaced value", 
  "sentence": "Sentence with <strong>{{replacedValue}}</strong>, and <i>{{anotherReplacedValue}}</i>."

}

页面文件

pages/index.js

import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useTranslation, Trans  } from "next-i18next";

export default function Home() {
  const { t } = useTranslation("common");

  return (
    <p>
      <Trans>
        {t("sentence", {
          replacedValue: t('replacedValue'),
          anotherReplacedValue: t('anotherReplacedValue'),
        })}
      </Trans>
    </p>
  );
}

export async function getServerSideProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
    },
  };
}

结果

包含某个替换值和 * 另一个替换值 * 的句子。

注意️

确保从next-i18next而不是react-i18next导入Trans，否则您将得到水合错误，因为转换发生在客户端而不是服务器端。