Документация

React i18n без ключей перевода

Большинство библиотек React i18n работают с ключами перевода. Вы заменяете каждый текст в приложении ключом, храните файл переводов для каждого языка и ищите нужный текст во время выполнения. В Magic Translate все это обходит стороной: вы пишете текст на своем родном языке, и при отображении страницы он переводится.

Как работает i18n с ключами перевода

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

// en.json
{ "checkout.button": "Continue to payment" }


// de.json
{ "checkout.button": "Weiter zur Zahlung" }


// Checkout.tsx
<button>{t('checkout.button')}</button>

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

Та же кнопка без клавиш

С хэштегом Magic Translate текст остается на своих местах:

import { T } from '@magic-translate/react';


<button>
  <T>Continue to payment</T>
</button>

Нет языковых файлов, которые нужно поддерживать. При изменении текста новая версия переводится при следующем показе, а затем перевод кэшируется.

Приступаем к работе

  1. Зарегистрируйтесь на Magic Translate и получите ключ API. Бесплатный план включает 5000 символов в месяц.
  2. Установите клиент и заверните приложение в MagicTranslateProvider, как показано в руководстве по React.
  3. Оберните текст в <T>. Для props и атрибутов используйте useT hook.
import { MagicTranslateProvider, T, Language } from '@magic-translate/react';


const App = () => (
  <MagicTranslateProvider apiKey="<your-api-key>" language={Language.FR}>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
  </MagicTranslateProvider>
);

Если вы выполняете рендеринг на сервере, вместо этого используйте React SSR, чтобы поисковые системы и пользователи получали полностью переведенный HTML.

Когда ключи перевода по-прежнему являются лучшим выбором

Машинный перевод — это хорошо, но его не проверяет человек. Если каждое слово вашего приложения должно быть одобрено переводчиком, например, для юридических или медицинских текстов, библиотека на основе ключей, содержащая переводы, переведенные людьми, предоставит вам такую возможность. Многие приложения сочетают в себе и то, и другое: Magic Translate в большинстве интерфейсов и проверенные тексты там, где это необходимо.

Часто задаваемые вопросы

Достаточно ли быстрый перевод?

Первый перевод текста может занять несколько секунд. После этого файл кэшируется и занимает от 100 до 300 мс. В React SSR переводы выполняются на сервере, поэтому пользователи никогда не ждут их.

Сколько это стоит?

Использование учитывается в переведенных символах в месяц, а уже переведенный текст снова не учитывается. Узнайте, как рассчитывается использование ресурсов и каковы цены.

Какие языки поддерживаются?

Более 70 лет. Ознакомьтесь с полным списком поддерживаемых языков.

ПредыдущееNext.jsСледующийMagic Translate vs. i18next