# General Translation Knowledge Base: Какая библиотека интернационализации лучше всего подходит для приложения React? URL: https://generaltranslation.com/ru/kb/best-react-i18n-library.mdx Docs index: https://generaltranslation.com/llms.txt Description: Четыре основные библиотеки интернационализации для React — это gt-react от General Translation, react-i18next, Lingui и React Intl. Все четыре выполняют рендеринг и форматирование переводов, но только gt-react ещё и генерирует их — на основе текста, написанного прямо в JSX. Выбирайте react-i18next, если хотите сохранить каталоги и плагины i18next, Lingui — если нужно извлечение текста в скомпилированные каталоги, а React Intl — если вам нужны FormatJS и ICU MessageFormat. Category: Инструменты для рабочих процессов Last updated: 2026-10-16 Authors: Jackie Chen Published: 2026-10-16 Выбор библиотеки интернационализации для React зависит от того, где должен храниться текст и кто готовит переводы. gt-react хранит текст прямо в JSX и из всех перечисленных вариантов единственная ещё и генерирует переводы. react-i18next, Lingui и React Intl выполняют рендеринг переводов, которые вы предоставляете в файлах каталогов, причём у каждой из них свой подход к написанию текста и свой набор инструментов. Начните с модели рендеринга. У приложения React, работающего только в браузере, приложения React с серверным рендерингом и приложения Next.js на App Router разные требования к настройке, и каждая библиотека описывает их отдельно. ## Чем отличаются основные библиотеки интернационализации для React? | Библиотека | Как пишется текст | Переводит ваш контент? | Формы множественного числа | Серверный рендеринг | Когда выбирать | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | | gt-react (General Translation) | Встроенный JSX в [``](/docs/react/reference/components/t), строки через [`useGT`](/docs/react/reference/hooks/use-gt), необязательное автоматическое оборачивание или словари с ключами | Да, с помощью [`gt translate`](/docs/cli/reference/commands/translate) | Ветви [``](/docs/react/reference/components/plural) | [Настройка SSR](/docs/react/react-quickstart); [gt-next](/docs/react/nextjs-quickstart) для App Router | Вам нужен читаемый текст прямо в компонентах и переводы, создаваемые при каждой сборке | | react-i18next | Ключи в JSON-ресурсах, `Trans` для форматированного текста | Нет. Переводит ваша команда или сервис, например Locize | Отдельный ключ для каждой формы множественного числа | [Руководство по SSR](https://react.i18next.com/latest/ssr) | Вы уже используете i18next или вам нужны его плагины | | Lingui | Встроенные макросы или явные ID с извлечением в каталоги PO | Нет. Каталоги передаются переводчикам или в сервис | ICU MessageFormat | [Интеграция с RSC](https://lingui.dev/tutorials/react-rsc) | Вам нужен рабочий процесс с извлечением и компиляцией каталогов | | React Intl (FormatJS) | Дескрипторы сообщений с ID и сообщениями по умолчанию | Нет. Переведённые каталоги готовите вы сами | ICU MessageFormat | Зависит от интеграции с вашим фреймворком | Ваша команда уже работает с FormatJS и ICU | ## Как одна и та же кнопка выглядит в react-i18next и gt-react? В react-i18next текст хранится в файле ресурсов: ```json title="locales/en/translation.json" { "settings": { "save": "Save changes" } } ``` Компонент получает его по ключу: ```tsx import { useTranslation } from 'react-i18next'; export function SaveButton() { const { t } = useTranslation(); return ; } ``` Для каждого из остальных языков нужен отдельный файл ресурсов, который приходится писать вручную или отдавать на перевод. С gt-react текст остаётся прямо в компоненте: ```tsx import { T } from 'gt-react'; export function SaveButton() { return ( ); } ``` Если запустить [`gt translate`](/docs/cli/reference/commands/translate) перед сборкой, каждый блок [``](/docs/react/reference/components/t) вместе со структурой его элементов отправляется в General Translation, после чего перевод записывается для каждой целевой локали. Правка текста видна в различиях компонента, и при следующем запуске этот текст будет переведён заново. ## 1. gt-react: текст в JSX, переводы генерируются gt-react хранит исходный текст прямо в компоненте. Оберните JSX в [``](/docs/react/reference/components/t), а там, где API требуется строка (например, `placeholder` у поля ввода), используйте [`useGT`](/docs/react/reference/hooks/use-gt). Для форматированного текста держите предложение и его встроенные элементы в одном блоке [``](/docs/react/reference/components/t), чтобы они переводились вместе, и добавляйте [проп `context`](/docs/react/reference/components/t#context), если сама формулировка допускает разные толкования. Если в приложении много неразмеченного JSX, [автоматическое внедрение JSX](/docs/cli/guides/using-auto-jsx) само добавит обёртки для перевода во время сборки. Включите `enableAutoJsxInjection` в разделе `files.gt.parsingFlags` файла `gt.config.json` и подключите `@generaltranslation/compiler` к сборщику. Функция работает в React SPA, приложениях React с серверным рендерингом и сборках Next.js на webpack, а уже существующие блоки [``](/docs/react/reference/components/t) не затрагивает. Прежде чем включать её во всём приложении, проверьте на нескольких экранах извлечённый текст, динамические значения и группировку форматированного текста. gt-react распространяется по [лицензии MIT](https://github.com/generaltranslation/gt) и построена на собственных пакетах General Translation для ICU и форматирования, а не на сторонней библиотеке интернационализации. Она выполняет рендеринг [переводов из бандла](/docs/react/guides/storing-translations) без аккаунта General Translation и без запросов во время выполнения. Если переводы генерирует General Translation, рецензенты могут исправлять их в [Редакторе переводов](/docs/platform/dashboard/guides/reviewing-translations). Настройка зависит от модели рендеринга: для приложений, работающих только в браузере, используйте [Быстрый старт SPA для React](/docs/react/react-spa-quickstart), для приложений с серверным рендерингом — [Быстрый старт React](/docs/react/react-quickstart), а для Next.js — [gt-next](/docs/react/nextjs-quickstart). **Выбирайте gt-react**, если хотите проверять текст прямо в различиях компонентов, генерировать переводы в рамках сборки или быстро локализовать существующее приложение с помощью автоматического оборачивания. ## 2. react-i18next: экосистема i18next [react-i18next](https://react.i18next.com/) связывает React с i18next — самым популярным i18n-фреймворком для JavaScript. Его хуки выполняют рендеринг сообщений из JSON-ресурсов, а компонент `Trans` обрабатывает текст, содержащий React-элементы. [Экосистема плагинов i18next](https://www.i18next.com/overview/plugins-and-utils) включает бэкенды для загрузки переводов, детекторы языка и инструменты извлечения строк, а официальный CLI отвечает за извлечение, синхронизацию локалей и генерацию типов TypeScript. i18next также поддерживает [исходный текст в качестве ключей](https://www.i18next.com/principles/fallback), хотя документация предупреждает, что так сложнее согласовывать правки текста с переводами. react-i18next не переводит ваши ресурсы. Переводы готовит ваша команда или сторонний сервис; команда i18next описывает [рабочий процесс с Locize](https://react.i18next.com/guides/multiple-translation-files). CLI `gt` также умеет [переводить JSON-файлы react-i18next](/docs/cli/guides/generating-translations) без миграции. **Выбирайте react-i18next**, если у вас уже есть ресурсы i18next или вам нужны его плагины для загрузки переводов и определения языка. ## 3. Lingui: извлечение и компиляция каталогов [Lingui](https://lingui.dev/introduction) позволяет писать сообщения прямо в коде с помощью макросов, извлекать их в каталоги, переводить и компилировать результат для приложения. Поддерживаются как сгенерированные, так и явно заданные ID сообщений; формат каталогов по умолчанию — PO. [Руководство по React](https://lingui.dev/tutorials/react) охватывает весь цикл, а для приложений с серверными компонентами есть [отдельная интеграция](https://lingui.dev/tutorials/react-rsc). Lingui позволяет держать тексты рядом с UI, но все этапы после извлечения — перевод, ревью, компиляция и загрузка — ложатся на вашу команду. Извлечение лишь находит новые сообщения, но не переводит их. **Выбирайте Lingui**, если ваши переводчики или сервис перевода работают с каталогами PO и вам нужны инструменты Lingui для извлечения и компиляции. ## 4. React Intl: FormatJS и ICU MessageFormat [React Intl](https://formatjs.github.io/docs/react-intl/) — библиотека FormatJS для React, предназначенная для работы с сообщениями, формами множественного числа, датами и числами. [Дескрипторы сообщений](https://formatjs.github.io/docs/react-intl/api/) идентифицируют каждое сообщение по ID и могут содержать необязательное сообщение по умолчанию и описание для переводчиков. [Инструмент извлечения FormatJS](https://formatjs.github.io/docs/getting-started/message-extraction/) собирает их и может генерировать ID. Сообщения записываются в формате [ICU MessageFormat](https://formatjs.github.io/docs/core-concepts/icu-syntax/), поэтому рецензентам нужно разбираться в его синтаксисе плейсхолдеров и форм множественного числа, а переведённые каталоги должен поставлять ваш конвейер. Серверный рендеринг и границы клиентских компонентов зависят от фреймворка, поэтому перед внедрением изучите интеграцию для вашего фреймворка. **Выбирайте React Intl**, если ваша команда уже работает с FormatJS или хочет использовать ICU MessageFormat повсеместно. ## Как протестировать библиотеку интернационализации для React, прежде чем сделать выбор? Возьмите одну функцию, в которой есть заголовок, именованная переменная, счётчик с формами множественного числа, доступная подпись поля ввода и отформатированная цена. Локализуйте её на два языка с помощью каждой из библиотек-кандидатов, затем измените одно предложение в исходном тексте и добавьте новое сообщение. Сравните: 1. **Создание текстов:** сможет ли рецензент понять текст и его контекст, просматривая различие? 2. **Перевод:** как новый или изменённый текст попадает к тому, кто его переводит? 3. **Проверка:** можно ли выявить отсутствующие сообщения и сломанные переменные до релиза? 4. **Доставка:** какие файлы или сервисы должны быть доступны во время рендеринга приложения в рабочей среде? Если ваша текущая библиотека оказалась лучше — оставайтесь на ней. CLI `gt` переводит и каталоги react-i18next, поэтому выбор способа создания текстов никак не ограничивает выбор способа их перевода. Перед выпуском пройдитесь по [чек-листу запуска многоязычного приложения](/kb/multilingual-app-launch-checklist). General Translation используют команды разработчиков в Cursor, Ramp, Profound, Cognition, Sierra и ClickHouse. Чтобы попробовать, начните с руководства [Быстрый старт React](/docs/react/react-quickstart). ## Часто задаваемые вопросы ### Какая библиотека интернационализации для React переводит приложение автоматически? gt-react. react-i18next, Lingui и React Intl лишь выполняют рендеринг переводов, которые вы подготовили сами. В gt-react команда [`gt translate`](/docs/cli/reference/commands/translate) генерирует переводы для всех целевых локалей, используя ваш код как контекст. ### Что лучше: react-i18next или React Intl? В целом ни одна из библиотек не лучше другой. react-i18next подойдёт командам, которым нужны JSON-ресурсы и плагины i18next. React Intl — командам, которые стандартизировали свой стек на FormatJS и ICU MessageFormat. В обоих случаях сам перевод остаётся за вашей командой или сторонним сервисом. ### Какая библиотека интернационализации для React поддерживает Серверные компоненты? Для приложений Next.js на App Router используйте [gt-next](/docs/react/nextjs-quickstart): эта библиотека поддерживает Серверные и Клиентские Компоненты. У Lingui есть [отдельная интеграция с RSC](https://lingui.dev/tutorials/react-rsc), а для App Router также подойдёт next-intl. ### Можно ли использовать General Translation, не отказываясь от react-i18next? Да. Если `i18next` указан непосредственно в зависимостях вашего `package.json`, CLI `gt` обнаружит его и переведёт JSON-ресурсы react-i18next, сохранив их синтаксис. Подробнее см. в разделе [Генерация переводов](/docs/cli/guides/generating-translations). ### Нужны ли JSON-файлы перевода при использовании gt-react? Как исходные файлы — нет. Тексты пишутся прямо в коде, а переводы генерируются в виде файлов во время сборки или раздаются через CDN General Translation. Подробнее см. в статье [i18n без файлов перевода](/kb/i18n-without-translation-files). ## Ключевые выводы * gt-react, react-i18next, Lingui и React Intl умеют выполнять рендеринг и форматирование переводов в React. Но только gt-react ещё и генерирует их. * В gt-react текст хранится прямо в JSX, а существующий JSX можно автоматически оборачивать во время сборки. * react-i18next, Lingui и React Intl опираются на каталоги, которые заполняет ваша команда или сервис перевода. * Можно продолжать использовать react-i18next и при этом переводить его ресурсы с помощью General Translation. ## Related questions - [General Translation против i18next, react-intl и next-intl: какую библиотеку интернационализации выбрать?](https://generaltranslation.com/ru/kb/general-translation-vs-i18n-libraries.mdx): Библиотеки с открытым исходным кодом, такие как i18next, react-intl и next-intl, ничего не переводят. Они лишь отображают переводы, которые вы сами помещаете в файл каталога для каждого языка, — их пишете вы, ваши переводчики или сторонний сервис. Библиотеки General Translation тоже имеют открытый исходный код и делают то же самое, но General Translation ещё и выполняет перевод, используя ваш код как контекст. - [Что проверить перед запуском многоязычного приложения?](https://generaltranslation.com/ru/kb/multilingual-app-launch-checklist.mdx): Перед запуском многоязычного приложения проверьте девять аспектов в каждой поддерживаемой локали: пользовательские сценарии целиком, включая ошибки; определение и переключение языка; переменные и формы множественного числа; валюту и часовые пояса; увеличение длины текста; вёрстку для языков с письмом справа налево; доступность; доставку переводов в рабочей среде; индексируемые языковые URL для SEO. Для каждой проверки нужен явный критерий успешного прохождения. - [Можно ли реализовать i18n без файлов перевода?](https://generaltranslation.com/ru/kb/i18n-without-translation-files.mdx): Да. С gt-react или gt-next контент остаётся встроенным прямо в ваши компоненты внутри компонента ``, а переводы генерируются во время сборки, поэтому не нужно писать ключи и JSON-файлы для каждой локали и следить за их синхронизацией. - [Как работать с формами множественного числа в React?](https://generaltranslation.com/ru/kb/how-to-handle-plurals-in-react.mdx): Не зашивайте логику выбора формы множественного числа в код с помощью проверок вроде n === 1. Для приложений только на английском хватит небольшой вспомогательной функции, но многоязычным приложениям нужны locale-aware правила множественного числа. С ними для любого языка справляется i18n-компонент, например `` из gt-react или gt-next. ## Previous and next questions - Previous question: [Альтернативы Transifex: General Translation или Transifex](https://generaltranslation.com/ru/kb/general-translation-vs-transifex.mdx) - Next question: [Писать собственную i18n или использовать General Translation?](https://generaltranslation.com/ru/kb/general-translation-vs-in-house-i18n.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/ru/kb/sitemap.md) for every article.