🌐 Add Multiple Languages to Your React App Using react-i18next

coding, Programming, React, Software Development 2 Minutes

May 6, 2025

Recently, I updated the frontend of a React app to support multiple languages using react-i18next, enabling a seamless experience for both English and Spanish users. This approach helps build more inclusive applications — and it’s easier than I thought before trying it!

💬 Want to build a modern multilingual frontend for your Rails app? Or improve your current UI with React?

📬 Let’s talk! Contact me here

🔧 Installation

Article content

To get started, I installed the following packages:

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

These libraries work together to detect the user’s language, load translations, and integrate them into your React components.

🧩 i18n.js – Core i18n Configuration

// src/i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import XHR from 'i18next-xhr-backend';

import enTranslations from './locales/en.json';
import esTranslations from './locales/es.json';

i18n
  .use(LanguageDetector)
  .use(XHR)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslations },
      es: { translation: esTranslations },
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

🌍 Translation Files

locales/en.json

Article content
{
  "welcome": "Welcome to React",
  "home": "Home",
  "about": "About",
  "vehicles": "Vehicles",
  "contact": "Contact",
  "hello": "Hello, {{name}}!"
}

locales/es.json

Article content
{
  "welcome": "Bienvenido a React",
  "home": "Inicio",
  "about": "Acerca de ShipCheap",
  "vehicles": "Vehículos",
  "contact": "Contáctanos",
  "hello": "¡Hola, {{name}}!"
}

📁 Updated index.js

import React from "react";
import ReactDOM from "react-dom/client";

import "./i18n"; // Load translations

import Header from './layout/Header';
import Footer from './layout/Footer';
import Users from './Users';

function App() {
  return (
    <div className="App">
      <Header />
      <Users />
      <Footer />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

🧠 Header.js with Language Toggle and Menu

import React from "react";
import logo from "./assets/images/logo_header.jpg";
import { useTranslation } from "react-i18next";

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

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

  return (
    <div>
      <img src={logo} alt="Logo" />
      <nav className="menu">
        <ul className="menu-list">
          <li><a href="/">{t('home')}</a></li>
          <li><a href="/about">{t('about')}</a></li>
          <li><a href="/vehicles">{t('vehicles')}</a></li>
          <li><a href="/contact">{t('contact')}</a></li>
        </ul>

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

export default Header;

🚀 Results

✅ Users can switch between English and Spanish in real time

✅ Structure allows easy addition of new languages

✅ Clean separation between content and logic

Check out the full PR here: 🔗 https://github.com/ggerman/frontend/pull/1

Article content
Unknown's avatar

Published by ggerman

Software Developer | Ruby on Rails | Embedded Systems Enthusiast I’m a backend developer with 10+ years of experience building scalable systems and crafting robust APIs with Ruby on Rails, Python, and PHP. I thrive on delivering confident solutions, leveraging tools like AWS, Docker, and RSpec to ensure stability and performance. Beyond coding, I love blending hardware and software in IoT projects, creating innovative solutions with Arduino C++ and MicroPython. Always learning, always solving.

Published

Leave a comment