Add internationalization (different languages) to your website using i18next and React

by
Tiempo de lectura: 2 minutos

Today we are going to learn how to integrate internationalization and different languages using i18next (https://react.i18next.com/) and React, and also achieve browser language detection.

To implement internationalization with i18next in your React application, you first need to install i18next and its related modules, such as react-i18next. Then, configure i18next so that it can load translations from JSON files corresponding to each language.

Assuming you already have a directory structure in your project, here is a step-by-step example:

  • Install the necessary dependencies:
npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector --save
  • Add translations in a folder called locale as follows:
/public
  /locale
    en.json
    es.json
    de.json

In this case, we added English, Spanish, and German.

The files will contain translations like this:

{
  "welcome": "Welcome",
  "buttonText": "Click me"
  // ... other translations
}

*The same key and value in different languages according to the language.

  • Now let’s create the i18next Provider that will contain the language configuration. For this, we’ll go to contexts/i18next.tsx
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,
    interpolation: {
      escapeValue: false,
    },
    backend: {
      // Specific configuration for the backend
      loadPath: '/locale/{{lng}}.json', // Changed to the new structure
    },
  });

export default i18n;

We configure i18n using Backend (to allow loading .json files), LanguageDetector (to automatically detect the language with the browser), initReactI18next (allows i18next to work efficiently with React-based applications, providing React-specific functions and context)

Then we indicate that the default language is en, to get the English .json in languages that do not exist.

Now let’s add the provider to our app, for that go to index.js, app.js, main.js (in my case main.tsx) and add:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { I18nextProvider } from 'react-i18next';
import i18n from './context/i18next';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>,
)

And finally, to use the translation, we will do the following:

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

function DefaultButton({ text }: { text: string }) {
  const { t } = useTranslation();

  return (
    <button>
      {t('buttonText')} - {text}
    </button>
  );
}

And it will appear:

Post Views: 1

Leave a Comment