npm init vite@latest i18n-ts-app

npm i react-i18next
npm i i18next
npm i i18next-browser-languagedetector

cd src
mkdir i18n
vi i18n/configs.ts

src/i18n/configs.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import translation_en from './en.json';
import translation_ja from './ja.json';

const resources = {
  ja: {
    translation: translation_ja,
  },
  en: {
    translation: translation_en,
  },
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'ja',
    interpolation: {
      escapeValue: false,
    },
    debug: process.env.NODE_ENV !== 'production', // production 以外の時は debug モードにする
  });

export default i18n;

src/i18n/ja.json

{
  "header": {
    "アカウント": "アカウント（日本語）"
  }
}

src/i18n/en.json

{
  "header": {
    "アカウント": "Account(English)"
  }
}

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import './i18n/configs'; //i18n設定

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

src/App.tsx

import './App.css';
import { useTranslation } from 'react-i18next';

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

  return (
    <>
      <h1> 翻訳された文字列が表示されます</h1>
      <div>{t('header.アカウント')}</div>
      <div>現在の言語: {i18n.language}</div>
    </>
  );
}

export default App;