通常の使用方法だと多言語対応のみにしか使えない

本来のi18nextの使い方とは異なりますが、特定環境の場合にのみいくつかの文言を変更する必要があり、その実装のためにi18nextを利用しました。

ただそのまま使ってしまうとシングルインスタンスゆえ、多言語対応か文言変更のどちらかにしか使えなくなってしまいます。

そこで今回はマルチインスタンスを用いて、i18nextを文言変更と多言語対応の両方に使えるよう実装してみました。

前提環境

18next@23.11.3
react-i18next@14.1.1

実際のコード

多言語対応用のインスタンス

src/i18next/language/index.ts

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'

import translationJA from './translations/ja'
import translationEN from './translations/en'

const i18nInstance = i18n.createInstance()

i18nInstance.use(initReactI18next).init({
  resources: {
    ja: { translation: translationJA },
    en: { translation: translationEN },
  },
  lng: 'ja',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
})

export default i18nInstance

文言変更用のインスタンス

src/i18next/label/index.ts

import * as i18n from 'i18next'
import { TFunction } from 'i18next'
import { initReactI18next, useTranslation } from 'react-i18next'

import translationDefault from './translations/default'
import translationLabel1 from './translations/label1'

const i18nInstance = i18n.createInstance()

i18nInstance.use(initReactI18next).init({
  resources: {
    default: { translation: translationDefault },
    label1: { translation: translationLabel1 },
  },
  lng: 'default',
  fallbackLng: 'default',
  interpolation: {
    escapeValue: false,
  },
})

export default i18nInstance

export function useLabelTranslation() {
  const { t: labelTranslate } = useTranslation(undefined, { i18n: i18nInstance })
  return { labelTranslate }
}

読み込み順序調整用

src/i18next/index.ts

import './label'
import './language'  // useTranslationの際にlanguageが優先されるよう、2番目に読み込む

使い方

src/i18next/index.ts をindex.tsxでimportした上で、以下のように使用します。

多言語対応用途での使用

src/components/ComponentA.tsx

import { useTranslation } from 'react-i18next'

export default () => {
  // languageのi18nextを2番目に読み込んでいるため、デフォルトでlanguageの設定が適用されている
  const { t } = useTranslation()
  return (
    <div>{t('lang.hoge')}</div>
  )
}

文言変更用途での使用

src/components/ComponentB.tsx

import { useLabelTranslation } from '~/i18next/label'

export default () => {
  // useLabelTranslation内で文言変更用のインスタンスを指定しているため、文言変更用の設定が適用されている
  const { labelTranslate } = useLabelTranslation()
  return (
    <div>{labelTranslate('label.hoge')}</div>
  )
}

参考サイト