𝗛𝗼𝘄 𝘁𝗼 𝗔𝗰𝗵𝗶𝗲𝘃𝗲 𝗟𝗼𝗰𝗮𝗹𝗶𝘀𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀

English → French → Japanese → Arabic (RTL)
All from one codebase. Zero rewrites.

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

src/
├── i18n/
│   ├── index.js          ← i18n config
│   └── locales/
│       ├── en/
│       │   └── translation.json
│       ├── fr/
│       │   └── translation.json
│       └── ja/
│           └── translation.json

// locales/en/translation.json
{
  "welcome": "Welcome, {{name}}!",
  "logout": "Logout",
  "items_one": "{{count}} item",
  "items_other": "{{count}} items",
  "errors": {
    "required": "This field is required"
  }
}

// locales/fr/translation.json
{
  "welcome": "Bienvenue, {{name}}!",
  "logout": "Se déconnecter",
  "items_one": "{{count}} article",
  "items_other": "{{count}} articles",
  "errors": {
    "required": "Ce champ est obligatoire"
  }
}

// src/i18n/index.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpBackend from 'i18next-http-backend';

i18n
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',       // default if language not found
    debug: false,

    detection: {
      order: ['localStorage', 'navigator'],
      cacheUserLanguage: true  // remembers user choice
    },

    backend: {
      loadPath: '/locales/{{lng}}/translation.json'
    },

    interpolation: {
      escapeValue: false       // React handles XSS
    }
  });

export default i18n;

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './i18n/index.js';   // ← import before App renders

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

import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      {/* Basic translation */}
      <h1>{t('welcome', { name: 'John' })}</h1>

      {/* Nested key */}
      <span>{t('errors.required')}</span>

      {/* Pluralisation — auto picks _one or _other */}
      <p>{t('items', { count: 5 })}</p>
    </div>
  );
}

import { useTranslation } from 'react-i18next';

const languages = [
  { code: 'en', label: 'English' },
  { code: 'fr', label: 'Français' },
  { code: 'ja', label: '日本語' },
  { code: 'ar', label: 'العربية' }
];

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const changeLanguage = (code) => {
    i18n.changeLanguage(code);

    // Handle RTL languages
    document.dir = code === 'ar' ? 'rtl' : 'ltr';
  };

  return (
    <div>
      {languages.map(({ code, label }) => (
        <button
          key={code}
          onClick={() => changeLanguage(code)}
          className={i18n.language === code ? 'active' : ''}
        >
          {label}
        </button>
      ))}
    </div>
  );
}

function PriceDisplay({ amount, date }) {
  const { i18n } = useTranslation();
  const locale = i18n.language;

  // Format currency
  const price = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: locale === 'ja' ? 'JPY' : 'USD'
  }).format(amount);

  // Format date
  const formattedDate = new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);

  return (
    <div>
      <p>{price}</p>
      <p>{formattedDate}</p>
    </div>
  );
}

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

// Wrap app in Suspense
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

// Or check inside component
function Dashboard() {
  const { t, ready } = useTranslation();

  if (!ready) return <Spinner />;

  return <h1>{t('welcome')}</h1>;
}