React Internationalization (i18n)

Add multi-language support to React apps.

Install react-i18next

npm install react-i18next i18next

Setup

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

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        welcome: 'Welcome',
        goodbye: 'Goodbye'
      }
    },
    es: {
      translation: {
        welcome: 'Bienvenido',
        goodbye: 'Adiós'
      }
    }
  },
  lng: 'en',
  fallbackLng: 'en'
});

export default i18n;

Using Translations

import { useTranslation } from 'react-i18next';

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

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

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => changeLanguage('es')}>Español</button>
      <button onClick={() => changeLanguage('en')}>English</button>
    </div>
  );
}

With Variables

{
  welcome: 'Welcome, {{name}}!'
}

t('welcome', { name: 'John' })

Remember

• Separate translation files
• Use translation keys
• Support plurals
• Format dates/numbers correctly

Next: Learn SEO optimization!