How to Make a Website Multilingual

The i18next framework allows you to add support for multiple languages to a website. It can be used with various frameworks, but the examples in this article are based on React.

• Documentation: https://www.i18next.com/
• Using with TypeScript: https://www.i18next.com/overview/typescript
• Supported frameworks: https://www.i18next.com/overview/supported-frameworks

Installation

npm

npm install i18next --save

yarn

yarn add i18next

For React, you also need to install react-i18next:

https://www.npmjs.com/package/react-i18next

npm i react-i18next

Configuration

The framework is highly configurable and supports various plugins and modules.

Setup guide from the framework creators:

https://www.i18next.com/overview/first-setup-help

First, create JSON files that will contain translations for the required languages. For example:

• en.json
• ru.json

Leave them empty for now—we will return to them later.

Next, create an i18n configuration file in the src directory called i18n.js.

Import the JSON files you created, initReactI18next from react-i18next, and i18n from i18next.

1import en from './trans/en.json'
2import ru from './trans/ru.json'
3
4import { initReactI18next } from 'react-i18next';
5import i18n from 'i18next';

Create a resources object and add the translation files:

1const resources = {
2    en: {
3        translation: en,
4    },
5    ru:{
6        translation: ru,
7    }
8}

Next, configure the i18n instance as follows.

More details about configuration options can be found here:

• https://www.i18next.com/overview/api
• https://www.i18next.com/overview/configuration-options

1i18n
2.use(initReactI18next)
3.init({
4    resources,
5    lang: 'ru',
6    fallbackLng: 'ru',
7    // disabled in production
8    debug: false,
9    interpolation: {
10        escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
11    },
12    react: {
13        wait: true,
14    },
15})
16
17export default i18n;
18

The .use() method allows you to connect various modules.

Import i18n in your index.js file:

1import './i18n';

Nothing else needs to be done in this file.

Using Translations in a Component

Import useTranslation from react-i18next and extract the t function.

1import './App.css';
2import { useTranslation } from 'react-i18next';
3
4function App() {
5  const { t } = useTranslation();
6 
7  return (
8    <div className="App">
9     
10    </div>
11  );
12}
13
14export default App;

Suppose we need to translate the following text:

1return (
2    <div className="App">
3      <h1>Поддержка нескольких языков на сайте</h1>
4      <p>Используем фреймворк i18n</p>
5    </div>
6);
7

First, open ru.json and define translation values.

I have seen different naming conventions for translation keys. Some developers use generic names, while others use the displayed text itself as the key. Choose whichever approach works best for your project and remains clear for future developers.

Remember that this is a JSON file—both keys and values must be enclosed in double quotes.

1{
2    "home_title": "Поддержка нескольких языков на сайте",
3    "home_description": "Используем фреймворк i18n"
4}
5

Now open en.json. The keys must exactly match those in ru.json.

1{
2    "home_title": "Support for multiple languages on​ the site",
3    "home_description": "Using the i18n framework"
4}
5

Return to the component and retrieve the text using the corresponding keys.

1import './App.css';
2import { useTranslation } from 'react-i18next';
3
4function App() {
5  const { t } = useTranslation();
6
7  return (
8    <div className="App">
9      <h1>{t("home_title")}</h1>
10      <p>{t("home_description")}</p>
11    </div>
12  );
13}
14
15export default App;

The website should now display the text in the default language.

Adding Language Switching

Import i18n into the component where you want to switch languages.

All you need to do is create a language-switching function and pass it to a control such as a <select> element.

Use the i18n.changeLanguage(value) method to change the active language.

1const onLangChange = (e) => {
2    i18n.changeLanguage(e.target.value)
3}

The value passed to changeLanguage() must match one of the keys in the resources object defined in i18n.js.

1import "./App.css";
2import { useTranslation } from "react-i18next";
3import i18n from "./i18n";
4
5function App() {
6  const { t } = useTranslation();
7
8
9  const onLangChange = (e) => {
10    i18n.changeLanguage(e.target.value);
11  };
12
13  return (
14    <div className="App">
15      <select onChange={onLangChange}>
16        <option value="ru">Russian</option>
17        <option value="en">English</option>
18      </select>
19
20
21      <h1>{t("home_title")}</h1>
22      <p>{t("home_description")}</p>
23    </div>
24  );
25}
26
27export default App;
28

GitHub