Magic Translate vs. i18next

i18next с привязками React react-i18next является самой популярной библиотекой i18n с открытым исходным кодом для JavaScript. Она построена на основе ключей перевода и языковых файлов. Magic Translate переводит текст в ваших компонентах напрямую, без ключей или файлов. На этой странице объясняется разница, чтобы вы могли выбрать подходящий инструмент для своего приложения.

С первого взгляда

Чем отличается код

С помощью react-i18next вы сохраняете языковой файл для каждого языка и обращаетесь к текстам по клавишам:

// locales/en/translation.json
{ "cart": { "title": "Your shopping cart" } }

// Cart.tsx
import { useTranslation } from 'react-i18next';

const Cart = () => {
  const { t } = useTranslation();
  return <h2>{t('cart.title')}</h2>;
};

При использовании Magic Translate текст остается в компоненте:

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

const Cart = () => (
  <h2>
    <T>Your shopping cart</T>
  </h2>
);

Когда выбирать Magic Translate

• Вы хотите, чтобы ваше приложение было на многих языках без управления языковыми файлами.
• У вас нет переводчиков или вы не хотите ждать их появления перед выпуском новой версии.
• Ваши тексты часто меняются, и вы хотите, чтобы все языки оставались в актуальном состоянии.
• Вы используете компоненты React Server или Next.js и хотите полностью переведенный HTML для поисковых систем.

Когда выбирать i18next

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

Переход с i18next на Magic Translate

Можно переключать по одному компоненту за раз. Замените t('key') английским текстом из языкового файла, завернутым в <T>, или используйте useT hook в качестве атрибутов props and. Во время миграции обе библиотеки могут работать бок о бок.

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