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

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部構成です。

インストール編

プロジェクトにi18nextとreact-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.initのlngでアクティブな言語、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アプリの開発で過去に使った記憶があるような。