How do I translate my React website?

Use an i18n library like react-i18next (replace text with t() keys and maintain a file per language), or add a translation script such as ConveyThis to index.html to translate the rendered app without code changes.

What is the best translation library for React?

react-i18next is the most widely used option and works with hooks via useTranslation. Other libraries exist, but the concepts (keys, locale files, interpolation, plurals) are the same.

Does ConveyThis work with React Router and dynamic content?

Yes. The script tracks client-side route changes and watches for newly rendered content, so new views and updated text are translated.

Is Google Translate a good way to translate a React site?

Browser translation helps individual visitors but creates no indexable pages and gives you no control over quality. Google's own website widget has been limited to non-commercial use since 2020.

How do I keep some React components untranslated?

With ConveyThis, add className="conveythis-no-translate" to the element. With react-i18next, don't pass that text through t().

Как перевести веб-сайт React (i18next или без кода)

Подведите итог этому посту следующим образом: 7 мин чтения

Перевести сайт React можно двумя способами. Маршрут кода представляет собой библиотеку i18n, такую как react-i18next: вы заменяете жестко закодированный текст ключами, вызываете t('key') через useTranslation hook и поддерживать файл перевода для каждого языка. Маршрут без кода представляет собой уровень перевода веб-сайта: вы добавляете один скрипт в свой файл ввода HTML, и он переводит визуализированное приложение, включая представления, которые появляются после навигации на стороне клиента. react-i18next подходит командам, где разработчики владеют текстом и хотят, чтобы он был в кодовой базе. Уровень перевода работает быстрее, когда вам нужен весь сайт на многих языках, включая контент из CMS или API.

Ключевые выводы

react-i18next (построенный на i18next) - наиболее распространенная настройка React i18n: npm install react-i18next i18next, инициализируем с помощью initReactI18next, затем используйте const { t } = useTranslation().
Библиотека i18n переводит ваши строки. Вам по-прежнему понадобятся переводчики, языковые URL-адреса, hreflang и план для контента CMS или API.
ConveyThis не требует изменений кода: вставьте фрагмент в index.html, выбирайте языки и редактируйте переводы в визуальном редакторе. Он следует навигации React Router и переводит вновь визуализированный контент.
Рендеринг только на стороне клиента ограничивает многоязычное SEO любым методом. Используйте рендеринг сервера (например, Next.js) или предварительный рендеринг, если важен поисковый трафик на других языках.

Вариант 1: Переведите приложение React с помощью react-i18next

The react-i18next руководство по началу работы показывает минимальную настройку.

1. Установить

npm install react-i18next i18next --save

2. Настроить i18next

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  en: { translation: { welcome: 'Welcome back, {{name}}', cart: 'Cart' } },
  de: { translation: { welcome: 'Willkommen zurück, {{name}}', cart: 'Warenkorb' } },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en', // active language
  fallbackLng: 'en', // used when a key is missing
  interpolation: { escapeValue: false }, // React already escapes output
});

export default i18n;

3. Импортируйте его один раз в точке входа

// src/main.jsx
import './i18n';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(<App />);

4. Используйте крючок в компонентах

import { useTranslation } from 'react-i18next';

export function Header({ user }) {
  const { t, i18n } = useTranslation();
  return (
    <header>
      <p>{t('welcome', { name: user.firstName })}</p>
      <button onClick={() => i18n.changeLanguage('de')}>Deutsch</button>
    </header>
  );
}

Как говорится в руководстве, “Вы получите функцию t, используя крючок useTranslation.” Для более крупных приложений разделите переводы на пространства имен и загружайте их по требованию (например, с помощью внутреннего плагина) вместо объединения всех языков.

Что оставляет вам библиотека i18n

Кто-то должен написать каждую клавишу на каждом языке и обновлять ее всякий раз, когда меняется английская копия. Отсутствующие клавиши незаметно возвращаются к языку по умолчанию.
Описания продуктов, записи в блогах и контент CMS отсутствуют в вашем коде, поэтому им необходим собственный процесс локализации.
Вы создаете URL-адреса языков. Введите язык в маршрут (/de/pricing) с React Router или маршрутизацией вашего фреймворка и синхронизируйте ее с i18n.language. Google рекомендует использовать отдельные URL-адреса для каждого языка, а не переключаться с помощью файлов cookie или настроек браузера (Центр поиска Google).
Вы также занимаетесь хрефлангом и <html lang>. Каждая языковая версия должна перечислять себя и все остальные, иначе Google игнорирует теги (Центр поиска Google). Обновлять document.documentElement.lang об изменении языка.
Цены и даты нужны Intl.NumberFormat и Intl.DateTimeFormat (или форматирование i18next).

Лучшие практики React i18n

Используйте описательные ключи (checkout.pay) вместо полных английских предложений в качестве ключей.
Никогда не создавайте предложения путем объединения переведенных фрагментов; используйте интерполяцию, чтобы переводчики могли изменить порядок слов.
Используйте обработку множественного числа i18next; во многих языках существует более двух форм множественного числа.
Не помещайте текст в изображения или SVG, которые вы не можете перевести.
Разработайте дизайн для более длинных строк и заранее протестируйте раскладки справа налево, если вам нужен арабский или иврит.
Добавьте проверку CI, которая не проходит, если ключ существует на английском языке, но отсутствует в других регионах.

Вариант 2: Перевести сайт React без кода, с ConveyThis

Если вы не хотите рефакторить каждый компонент или большая часть вашего контента поступает из CMS или API, ConveyThis может переводить приложение React по мере его рендеринга.

Настройка занимает пять шагов:

Создать учетную запись ConveyThis и добавьте свой домен.
Выберите исходный язык и целевые языки (поддерживается 210), затем сохраните.
Скопируйте фрагмент JavaScript с панели управления. The Руководство по установке React проходит через каждый экран.
Вставьте его в файл HTML-записи перед закрытием </head> или </body> тег: public/index.html в проектах Create React App или index.html в корне проекта в проектах Vite.
Развертывать. Появляется переключатель языков, и сайт переводится автоматически.

В одностраничном приложении скрипт отслеживает страницу на предмет добавленного или измененного контента после загрузки и отслеживает изменения маршрута на стороне клиента (навигация по API истории и изменения хэша). Когда React Router отображает новое представление или обновляет состояние, добавляет новый текст, ConveyThis транслирует его. Вашим компонентам не нужно ничего вызывать.

Вы сохраняете контроль над выводом:

Редактируйте любое предложение в контексте с помощью визуального редактора.
Установите правила глоссария для названий продуктов и фиксированных терминов (платные планы) и повторно используйте утвержденные переводы с памятью переводов.
Исключить элементы с помощью conveythis-no-translate класс, например имена пользователей, примеры кода или цены, которые вы форматируете самостоятельно (как исключить сегменты).
Пригласите рецензентов для каждого языка с командными ролями.

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

<span className="conveythis-no-translate">{user.displayName}</span>

SEO для сайтов React

Приложение React, визуализированное клиентом, отправляет почти пустую HTML-оболочку и создает страницу в браузере. Какой бы метод перевода вы ни использовали, это является основным препятствием для многоязычного SEO.

Если органический трафик на других языках имеет значение, визуализируйте контент на сервере или во время сборки (Next.js или этап предварительного рендеринга).
Дайте каждому языку свой URL-адрес. ConveyThis поддерживает подпапки, поддомены или a ?lang параметр, автоматически добавляет теги hreflang и транслирует заголовки, метаописания и JSON-LD. Видеть многоязычное SEO.
Проверьте, что видит Google, с помощью функции проверки URL-адресов Search Console на переведенном URL-адресе.

react-i18next против слоя трансляции

	react-i18next	ConveyThis
Изменения кода	Каждая строка заменена на `t()` ключи	Один тег скрипта
Кто переводит	Ваша команда или переводчики в файлах JSON	Первый черновик машинного перевода, отредактированный визуально
Содержимое CMS / API	Отдельный процесс	Переведено со страницы
Новый контент	Добавьте ключи в каждую локаль	Обнаружен и переведен автоматически
URL-адреса и hreflang	Вы их строите	Встроенный
Лучше всего подходит для	Пользовательский интерфейс приложения принадлежит разработчикам	Сайты с большим количеством контента, маркетинговые страницы, много языков

Многие команды используют как react-i18next для пользовательского интерфейса вошедшего в систему продукта, так и уровень перевода для маркетингового сайта, документов и контента CMS.

Информацию о концепциях см. в нашем руководство по интернационализации (i18n). Если вы также работаете в Vue, читайте как перевести сайт Vue.js. Если ваше приложение Angular, есть отдельное Angular интеграция.

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Как перевести мой сайт React?

Используйте библиотеку i18n, например react-i18next (замените текст на t() ключи и поддерживать файл на каждом языке) или добавьте сценарий перевода, например ConveyThis, в index.html для перевода визуализированного приложения без изменения кода.

Какая библиотека перевода для React лучшая?

react-i18next - наиболее широко используемый вариант, работающий с крючками useTranslation. Существуют и другие библиотеки, но концепции (ключи, файлы локалей, интерполяция, множественное число) те же.

Работает ли ConveyThis с React Router и динамическим контентом?

Да. Скрипт отслеживает изменения маршрута на стороне клиента и отслеживает новый отображаемый контент, поэтому переводятся новые представления и обновленный текст.

Является ли Google Translate хорошим способом перевода сайта React?

Перевод браузера помогает отдельным посетителям, но не создает индексируемых страниц и не дает вам контроля над качеством. Собственный виджет сайта Google с 2020 года ограничен некоммерческим использованием.

Как сохранить некоторые компоненты React непереведенными?

С ConveyThis добавить className="conveythis-no-translate" к стихии. С помощью react-i18next не передавайте этот текст t().

Чтобы попробовать это в вашем приложении React, создать учетную запись ConveyThis и вставьте фрагмент в свой index.html.