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

...