Как сделать сайт мультиязычным

19 июня 2023 г.

Фреймворк i18next позволяет сделать на сайте функционал переключения между несколькими языками. Его можно использовать не только в React, но в заметке примеры будут относится к нему.

Документация https://www.i18next.com/

Как использовать с TypeScript https://www.i18next.com/overview/typescript

Поддерживаемые фреймворки https://www.i18next.com/overview/supported-frameworks

Команды установки:

# npm

npm install i18next --save

# yarn

yarn add i18next

Для реакт еще необходимо установить react-i18next https://www.npmjs.com/package/react-i18next

npm i react-i18next

Настройка

Фреймворк можно настраивать широко, подключать различные модули.

Помощь в настройке от создателей фреймфорка https://www.i18next.com/overview/first-setup-help

Для начала создаем файлы в формате JSON, в которых будет содержаться текст, на нужном языке. Например, en.json и ru.json.

Пока оставим их пустыми, вернемся к ним позже.

Затем, в папке src создадим файл конфигурации i18n который так и назовем i18n.js Импортируем в него созданные json файлы, initReactI18next из react-i18next и i18n из i18next.

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

Создадим переменную resources, куда поместим файлы json следующим образом.

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

Далее обращаемся к объекту i18n и устанавливаем следующие настройки.

Более полную информацию о настройке можно найти здесь: 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

Метод .use() позволяет подключить различные модули.
Импортируем i18n в файл index.js

1import './i18n';

Больше с ним ничего не нужно делать в этом файле.

Использование в компоненте

В компонент импортируем useTranslation из react-i18next и достаем из него переменную t.

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;

Допустим, нам надо перевести следующий текст:

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

Для начала идем в файл ru.json и задаем там значения для нашего текста. Я встречала несколько вариантов именования блоков текста. Кто-то называл общими названиями, кто-то полностью в указывал отображаемый текст. Думаю, здесь нужно поступать, как вам удобно и чтобы было понятно другим разработчикам, которые могут прийти на проект.

Помните, что это файл JSON - и ключ и значение должны быть заключены в двойные кавычки:

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

Переходим в файл en.json. Ключи должны называться точно также, как и в файле ru.json.

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

Возвращаемся в компонент и достаем текст по указанным ключам.

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;

Сейчас на сайте должен отобразиться текст на языке, указанном по умолчанию.

Настраиваем переключение языков

Импортируем в необходимый компонент i18n.

1import i18n from "./i18n";

И все что нам нужно сделать, это создать функцию переключения языка и передать ее например в select.

Для переключения языка используем метод i18n.changeLanguage(value).

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

Value, которое мы передаем, должно быть равно названию ключа в объекте resources в файле 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">Русский</option>
17        <option value="en">Aнглийский</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