ゴール

React i18next の使い方、実装の流れ（全体像）をなんとなくでいいから手を動かして把握する。

プロジェクトを作成

npm create vite@latest sample-i18n-app -- --template react
cd sample-i18n-app
code .

パッケージをインストール

npm i
npm install i18next react-i18next

enumura1

翻訳ファイル作成

日本語用

ja.json

{
  "hello": "こんにちは",
  "welcome": "ようこそ",
  "button": "ボタン"
}

英語用

en.json

{
  "hello": "Hello",
  "welcome": "Welcome", 
  "button": "Button"
}

enumura1

i18nの設定ファイルを作成

i18n.js

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

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

i18n
    .use(initReactI18next) // i18next を React とバインド
    .init({
        resources: {
            ja: { translation: ja }, // 日本語訳
            en: { translation: en }  // 英語訳
        },
        lng: 'ja', // 初期言語は常に日本語
        fallbackLng: 'en' // ja.jsonに用語が見つからないときに英語表示
    });

export default i18n;

enumura1

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
+ import './i18n'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

enumura1

表示内容を作成

App.jsx

import { useTranslation } from 'react-i18next';

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

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('hello')}</h1>
      <p>{t('welcome')}</p>

      <button onClick={() => changeLanguage('ja')}>日本語</button>
      <button onClick={() => changeLanguage('en')}>English</button>

      <br /><br />
      <button>{t('button')}</button>
    </div>
  );
}

export default App;

enumura1

実行

npm run dev

下記のようにデフォルト画面が表示されることを確認。

ブラウザで言語切り替えボタン（Englishボタン）を押して、テキストが変わることを確認