Adding Internationalization to Your React App Using react-i18next

What is internationalization:

If you are here right now, there is a big possibility you are building an application that supports different languages from different countries and you have been assigned the task to work on it. Or you are researching the best way to support different languages in your React project.

According to MDN docs,

Internationalization, often shortened to "i18n", is the practice of designing a system in such a way that it can easily be adapted for different target audiences, that may vary in region, language, or culture.

Let’s jump right into it.

Why Add i18n to Your React App?

Before diving into the how let's first explore the why. Internationalization (i18n) opens doors to a wider audience and unlocks a myriad of benefits for your React app:

Reach a Global Audience
Enhance user experience
Boost brand recognition and competitiveness
Improve SEO and User Acquisition
Reduce Development and Maintenance Costs

By implementing i18n, you're not just translating words, you're building bridges to a wider audience, fostering deeper connections with users, and paving the way for global success.

Tools

react-i18next
ReactJS
Vite
React Router DOM
yarn

Link to completed project: https://github.com/d-alchemist/react-i18next-tutorial-app

What is React-18next

react-i18next is a powerful internationalization framework for React / React Native which is based on i18next.

Source: https://react.i18next.com/

Setting Up The Example Project

We will create a simple home page with 2 languages, English and French.

yarn create vite my-language-app-js --template react

Navigate into your new React application:

cd my-language-app-js

Install React Router DOM:

yarn add react-router-dom --save

Next, we will install the translation library, react-i18next.

yarn add react-i18next i18next --save

i18next is an internationalization framework written in and for JavaScript. But it's much more than that!

i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop. — https://www.i18next.com/

Install these packages in your React application to load translations and detect the user’s language

yarn add i18next-http-backend i18next-browser-languagedetector --save

Project Structure

/public
|-- /locales
|   |-- en
|       | -- translation.json
|   |-- fr
|       | -- translation.json
/src
|-- /components
|   |-- LanguageSwitcher.jsx
|-- /libs
|   |-- i18n.js
|-- /pages
|   |-- Home.jsx
|   |-- Greet.jsx
|-- main.jsx
|-- index.css

Configuring i18next

You will need to create the i18n.js file in the libs folder and add the following content:

// src/libs/i18n.js

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

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng: 'en',
        debug: true,
    });
export default i18n;

Translation Files

Now we will need to add our translation files to our public/locales folder.

// public/locales/en/translation.json

{
  "title": "Welcome to your new language app",
    ...
}

// public/locales/fr/translation.json

{
  "title": "Bienvenue sur votre nouvelle application linguistique",
  ...
}

Translating the React App

react-i18next provides 3 different ways of translating text in your react components.

Using the translation hook
Using the withTranslation HOC
Using the Trans component

For the sake of this tutorial, we will be using the translation hook.

In the main.jsx file, import the i18n.js file

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'

// import i18n (needs to be bundled)
import './libs/i18n'
import './index.css'

import Home from './pages/Home'
import Greet from './pages/Greet'

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/greet",
    element: <Greet />
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

Implementation in React Components

You can use the hook inside your functional component like this:

// src/pages/Home.jsx
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import LanguageSwitcher from '../components/LanguageSwitcher'

function Home() {
  const { t } = useTranslation();
  return (
    <>
      <div>
        <LanguageSwitcher />
        <p>{t("title")}</p>
        <Link to="/greet">
          <button>{t("sayHello")}</button>
        </Link>
      </div>
    </>
  )
}

export default Home

The useTranslation hook takes one optional argument. You can either pass in a namespace or an array of name spaces.

For more details on this project, such as:

How to add a language switcher
How to detect the current language for the language switcher

All the code can be found here: https://github.com/d-alchemist/react-i18next-tutorial-app

Alternatives to React-18next:

There are other libraries you can use to translate your React application:

FormatJS (React-intl)
LinguiJS

Resources

If you want to learn more about react-i18next, you can visit the following pages:

Thank you for joining me on this technical journey. Your support and interest mean the world to me. I look forward to sharing more insightful content with you in the future. Until then, stay curious and keep exploring!

Adding Internationalization (i18n) to Your React App Using react-i18next