【React】多言語に対応する【i18next】

ネコニウム研究所

PCを利用したモノづくりに関連する情報や超個人的なナレッジを掲載するブログ

【React】多言語に対応する【i18next】

2024-7-12 | ,

Reactでi18nextを使って多言語に対応したい!

概要

今回の記事では、Reactでi18nextを使って多言語に対応する手順を掲載する。

仕様書

環境

  • node v21.1.0
  • npm 10.8.1
  • react 18.3.1
  • react-dom 18.3.1
  • i18next 23.11.5
  • react-i18next 14.1.2

手順書

インストール編と多言語対応編の2部構成です。

インストール編

プロジェクトにi18nextreact-i18nextをインストールする。

npm install i18next react-i18next

多言語対応編

src/i18n.tsを作り、このファイルに言語に関するデータを記述する。

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

const resources = {
    en: {
        translation: {
            "test": "TEST",
            "message": "Message",
        }
    },
    ja: {
        translation: {
            "test": "テスト",
            "message": "メッセージ",
        }
    }
};

const userLanguage = navigator.language || navigator.languages[0];

i18n
    .use(initReactI18next)
    .init({
        resources,
        lng: userLanguage.split('-')[0],
        fallbackLng: 'en',
        interpolation: {
            escapeValue: false
        }
    });

export default i18n;

i18n.initlngでアクティブな言語、fallbackLngで対応してない言語が選択された場合に使用する言語を設定する。
上記の例ではlngにブラウザの言語設定を取得して言語を設定してる。

App.tsxの中で多言語対応する例。

import React from 'react';
import { useTranslation } from 'react-i18next';

function App() {
    const { t } = useTranslation();

    return (
        <div>
            <p>{t('test')}</p>
            <p>{t('message')}</p>
        </div>
    );
}

export default App;

ブラウザの言語設定によって日本語と英語が切り替わる。日本語以外が設定されてる場合は英語になる。

まとめ(感想文)

tってWindowsアプリの開発で過去に使った記憶があるような。