React 国際化対応 i18next-browser-languagedetector 使うと言語の永続化がめちゃめちゃ簡単だった！

i18next を使って国際化対応をしていてユーザーの設定した言語を永続化するのに i18next-browser-languagedetector を使うとめちゃくちゃ簡単だったって話

環境

i18next 23.4.1
react-i18next 13.0.3
react 18.2.0
typescript 5.0.2

i18next-browser-languagedetector の導入

$ npm i i18next-browser-languagedetector

i18next-browser-languagedetector の設定

.use でライブラリを読み込ませて、init 内に detection キーでオプションを渡すだけ！

./src/i18n/config.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import translationEn from './locales/en.json';
import translationJa from './locales/ja.json';

const STORAGE_KEY = 'my_i18next' as const;

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // lng ではなく fallbackLng を使う
    fallbackLng: 'en',
    // i18next-browser-languagedetector の設定
    detection: {
      lookupCookie: STORAGE_KEY,
      lookupLocalStorage: STORAGE_KEY,
      lookupSessionStorage: STORAGE_KEY,
    },
    resources: {
      'en': {
        translation: translationEn,
      },
      'ja': {
        translation: translationJa,
      },
    }
  });

ポイントとしては lng ではなく fallbackLng を使うこと。 lng だとリロードした際に lng で指定してる言語が localStorage に保存されユーザーの選択した言語がリセットされてしまいます

i18next-browser-languagedetector の設定を追加するだけで、初回はブラウザの状態から言語設定を取得し自動的に localStorage に言語設定 (resources のキー) が保存され i18n.changeLanguage() が実行されると localStorage の値も変更されるようになりました
fallbackLng を指定しておくことで仮にユーザーのブラウザがイタリア語だったとして localStorage にはイタリア語のit が保存されますが、resources に it がなければ fallbackLng で指定している言語で表示することができますライブラリを導入するだけで独自に localStorage に保存する永続化の処理を書かずに済むのでとても便利です！

おわり

[参考]