Setup of i18next

Installation

To install this package, we enter the following lines into the terminal window:

npm install i18next react-i18next

Or, if you are using Yarn, enter the following:

yarn add i18next react-i18next

We install i18next, the internationalization framework, as well as react-i18next, the associated React bindings. These offer several components and functions that will simplify the work with i18next in React. This is similar to the principle of state management with redux and react-redux.

Creating translations objects

Let’s start by creating two objects containing our translations. One will hold German translations while the other will hold English translations:

const de = {
  greeting: 'Hallo Welt!',
  headline: 'Heute lernen wir Internationalisierung mit React',
  messageCount: '{{count}} neue Nachricht',
  messageCount_plural: '{{count}} neue Nachrichten',
};

const en = {
  greeting: 'Hello world!',
  headline: 'Today we learn Internationalization with React',
  messageCount: '{{count}} new message',
  messageCount_plural: '{{count}} new messages',
};

Importing i18next into our application

To use i18next in our application, we have to import it, initialize it, and pass the React plugin. Ideally, all these steps should happen somewhere at the beginning of our application, meaning before our app component is given over to ReactDOM.render().

We start by importing the i18next package as well as the named export initReactI18next from the react-i18next package:

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

Passing the React plugin and initializing i18next

Consequently, we can make use of the .use() method to pass the React plugin to i18next as well as use the .init() method to initialize i18next:

i18next
  .use(initReactI18next)
  .init({ ... });

init() function

The init() function expects a config object that should at least contain an lng property and a resources property. lng indicates the chosen language, while resources contains the actual translations. It is also useful to define a fall backing that can be used if one of the chosen translations is unavailable in the selected language. i18next offers up to 30 different configuration options. However, the three mentioned should be enough for the moment:

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

The primary language of the application and the fallback language are initially set to English. The resources object that follows needs a little more explanation. It follows this pattern:

[Language].[Namespace].[Translation Key] = Translation

Language should be clear enough to know exactly which language we are referring to. This can be en for English, de for German, or even de-AT for German with a focus on the Austrian dialect. The language property has an object that contains from one to an infinite number of namespaces.

Namespace

The namespace is a central feature of i18next. It allows for splitting large translation files into different parts, which can be dynamically lazy-loaded. While this feature is not necessary for smaller applications, it can be a game-changer for larger and more complex applications. It will help us contain the size of the translations and aid the translations’ readability—for example, by using a namespace for each page. Translation files for these different pages can then be cared for independently and will only be loaded if they are actually needed.

We always have to use at least one namespace in i18next. By default, it will be translation, but it can be changed in the defaultNS option in the configuration object of the .init() method. The namespace itself is also an object that contains the translations in the form of translationKey: value—or greeting: 'Hello world!', to be precise.

The value could also be an object:

{
  greeting: {
    morning: 'Good morning!',
    evening: 'Good evening!',
  }
}

Or, in fewer lines:

{
  'greeting.morning': 'Good morning!',
  'greeting.evening': 'Good evening!',
}

It is entirely up to you which form you like best.

Using translations in React components

Once i18next is set up correctly and the translations have been set up, we can start translating our components. i18next offers full flexibility: we can work with a withTranslation higher-order component (HOC) in class components or a useTranslation Hook in function components. In the rare case of using components inside of translations, react-i18next boasts a Trans component. We will look at these components in detail.