i18nextでキー文字列に「:」を使用したいときの対応

Next.jsのプロジェクトでi18nextを使用して多言語対応するときにキー文字列に「：」を使用してはまったので対策をメモしておきます。

キー文字列に「：」を使用するとコロン以降の文字列が表示され、正常に翻訳できない

common.json


{
  "hoge:fuga" : "test",
}

index.tsx


const { t } = useTranslation("common");
...

<p>{t('hoge:fuge')}</p>

fugeがレンダリングされる

デフォルトのnamespaceのセパレート文字列が: であるため、hogeファイルのfugaというキーを探しにいってしまう。

①キー文字列の変更

単純にキー文字列からコロンを使用しないように変更すればこの問題は発生しない。

②セパレート文字列の変更

1の対応ができない場合に使用。


<p>{t('hoge:fuge', { nsSeparator: "|" })}</p>

nsSeparatorの他にkeySeparatorもあるので間違いないように

keySeparatorは. がデフォルト文字列になっている

参考