React アプリケーションを多言語対応にする方法

npx create-react-app
or
npm create vite@latest

npm i i18next react-i18next i18next-browser-languagedetector i18next-http-backend

|-- public//
|    `-- languages//
|       |-- en//
|       |   |-- main.json
|       |   `-- validation.json
|       `-- ja//
|           |-- main.json
|           `-- validation.json
|    
|-- src//
|    |-- components//
|    |    `-- LngButton.jsx
|    |-- App.jsx
|    `-- main.jsx
`-- i18next.js

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";

i18next
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(Backend)
  .init({
    fallbackLng: "ja",
    // debug: true,
    ns: ["main", "validation"],
    fallbackNS: "main",
    detection: {
      order: ["localStorage", "navigator"],
    },
    backend: {
      loadPath: "/languages/{{lng}}/{{ns}}.json",
    }
  });

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import '../i18next'

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

import "./App.css";
import LngButton from "./components/LngButton";
import { useTranslation } from "react-i18next";

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

  return (
    <div className="App">
      <LngButton />
      <p>{t("hello")}</p>
      <p>{t("hello", {lng: 'ja'})}</p>
      <p>{t("auth.login")}</p>
      {/* 代入 */}
      <p>{t("name", {fn: 'Tanaka', ln: 'Taro'})}</p>
      {/* 複数 */}
      <p>{t("comment", {count: 0})}</p>
      <p>{t("comment", {count: 1})}</p>
      <p>{t("comment", {count: 100})}</p>
      {/* context */}
      <p>{t("comment", {context: 'good', count: 20})}</p>
      {/* namespace */}
      <p>{t("validation:error")}</p>
      <p>{t("error", {ns: 'validation'})}</p>
    </div>
  );
}

export default App;

{
    "hello": "hello world",
    "name": "hello {{fn}} {{ln}}",
    "auth": {
        "login": "login"
    },
    "comment_zero": "zero comment",
    "comment_one": "a comment",
    "comment_other": "{{count}} comments",
    "comment_good_other": "{{count}} good comments"
}

{
    "error": "is error"
}

{
    "hello": "こんにちは",
    "name": "こんにちは {{fn}} {{ln}}",
    "auth": {
        "login": "ログイン"
    },
    "comment_zero": "ゼロコメ",
    "comment_one": "イチコメ",
    "comment_other": "{{count}} コメンツ",
    "comment_good_other": "{{count}} グッド コメンツ"
}

{
    "error": "エラーがあります。"
}

import { useTranslation } from "react-i18next";

export default function LngButton() {
  const { t, i18n } = useTranslation();
  const lngs = {
    ja: "日本語",
    en: "English",
  };

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

  return (
    <>
      {Object.keys(lngs).map((lng) => (
        <button
          key={lng}
          onClick={() => lngChange(lng)}
          disabled={i18n.resolvedLanguage === lng}
        >
          {lngs[lng]}
        </button>
      ))}
    </>
  );
}