Internationalization (i18n) Frontend

Definition:

Internationalization (i18n) is the process of designing and developing frontend applications to support multiple languages, regions, and cultures without requiring code changes. It enables applications to adapt to different locales by externalizing text, formatting dates/numbers, and handling cultural preferences.

Key Features 🔤 Text Translation - Dynamic language switching 📅 Date/Time Formatting - Locale-specific formats 💰 Number/Currency Formatting - Regional standards 🔄 RTL/LTR Support - Text direction handling 🎨 Cultural Adaptation - Colors, images, layouts

Example:

• React with react-i18next

// i18n.js - Configuration
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  en: {
    translation: {
      "welcome": "Welcome",
      "login": "Login",
      "users_count": "{{count}} user",
      "users_count_plural": "{{count}} users"
    }
  },
  es: {
    translation: {
      "welcome": "Bienvenido",
      "login": "Iniciar Sesión",
      "users_count": "{{count}} usuario",
      "users_count_plural": "{{count}} usuarios"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en',
  fallbackLng: 'en'
});

// Component Usage
import { useTranslation } from 'react-i18next';

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

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

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button>{t('login')}</button>
      <p>{t('users_count', { count: 5 })}</p>

      <select onChange={(e) => changeLanguage(e.target.value)}>
        <option value="en">English</option>
        <option value="es">Español</option>
      </select>
    </div>
  );
}
// jsx