Поскольку глобализация становится все более распространенной, создание многоязычного веб-сайта является необходимостью для многих компаний и разработчиков. В этой статье мы рассмотрим, как создать многоязычный веб-сайт с помощью React и I18n.

Что такое I18n?

I18n — это сокращение от «Интернационализация» на английском языке. Это метод создания приложения или веб-сайта, совместимого с различными языками и культурами. I18n — это распространенный подход к обработке текста на разных языках в веб-приложениях.

Разработка с I18n

Шаг 1: Настройка проекта React

Прежде чем мы начнем работать с I18n, важно иметь настроенный проект React. Мы будем использовать «Create React App» для создания нашего проекта. Чтобы создать новый проект с помощью Create React App, выполните следующую команду:

npx create-react-app my-app

Шаг 2: Установка библиотеки I18n

После настройки вашего проекта следующим шагом будет установка библиотеки I18n. Чтобы установить библиотеку I18n, выполните следующую команду:

npm install i18next react-i18next --save

Шаг 3: Настройка I18n

Теперь нам нужно настроить I18n в нашем проекте. Для этого создайте файл i18n.js в корне вашего проекта со следующим содержимым:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./locales/en.json";
import pt from "./locales/pt.json";

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: en },
    pt: { translation: pt },
  },
  lng: "en",
  fallbackLng: "en",
  debug: true,
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

Этот файл настраивает I18n с двумя доступными переводами, в данном случае на английский (en) и португальский (pt). Файлы перевода en.json и pt.json будут созданы позже.

Шаг 4: Создание файлов перевода

Теперь нам нужно создать файлы перевода для каждого языка, который мы хотим сделать доступными на нашем веб-сайте. Чтобы создать файлы перевода, создайте папку с именем «locales» в корне вашего проекта и внутри нее создайте файл для каждого языка, который вы хотите поддерживать. Например, en.json и pt.json для английского и португальского языков соответственно.

Содержимое файла en.json может быть следующим:

{
  "greeting": "Hello World!",
  "description": "This is a sample text for i18n testing"
}

Содержимое файла pt.json может быть следующим:

{
  "greeting": "Olá Mundo!",
  "description": "Este é um texto de exemplo para testar o i18n"
}

Шаг 5: Использование I18n в вашем приложении React

Теперь, когда I18n настроен и файлы перевода созданы, мы можем использовать их в нашем приложении React. Чтобы использовать I18n в своем приложении, сначала импортируйте хук «useTranslation» из пакета react-i18next в компонент React. Затем используйте хук в вашем компоненте, чтобы получить необходимые переводы. См. пример ниже:

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

function Home() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t("greeting")}</h1>
      <p>{t("description")}</p>
    </div>
  );
}

export default Home;

Хук «useTranslation» возвращает объект, содержащий функцию «t», которая используется для перевода текстов в вашем приложении. В приведенном выше примере функция «t» используется для перевода текста тегов h1 и p на английский или португальский язык, в зависимости от конфигурации пользователя.

Заключение

Создание многоязычного веб-сайта может быть сложной задачей, но I18n значительно упрощает этот процесс. С библиотекой I18n и React вы можете эффективно создавать многоязычные веб-сайты без особых усилий. Я надеюсь, что эта статья была вам полезна, и вы готовы создать свой собственный многоязычный веб-сайт с помощью React и I18n.

Если вам понравилась эта статья, подпишитесь на мой блог, чтобы узнать больше о программировании. И не забудьте поделиться этим постом с теми, кому может быть интересна эта тема. Спасибо за чтение!