Magic Translate vs. i18next

i18next, with its React bindings react-i18next, is the most popular open-source i18n library for JavaScript. It is built around translation keys and language files. Magic Translate translates the text in your components directly, without keys or files. This page explains the difference so you can choose the right tool for your app.

At a glance

	Magic Translate	i18next
How you write text	Your own words, wrapped in `<T>`	A key per text, such as `t('cart.title')`
Translations	Machine translation, created automatically	You or your translators write them
Language files	None	One file per language and namespace
New languages	Change the `language` setting	Translate every key into the new language
Server rendering	React Server Components and Next.js	Yes, with extra setup
Plurals and formatting	Translated as part of the sentence	Built in, with plural rules per language
Price	Free plan, then monthly plans based on usage	Open source and free

How the code differs

With react-i18next, you keep a language file for each language and refer to the texts by key:

// 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>;
};

With Magic Translate, the text stays in the component:

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

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

When to choose Magic Translate

You want your app in many languages without managing language files.
You don't have translators, or you don't want to wait for them before you release a new version.
Your texts change often, and you want every language to stay up to date.
You use React Server Components or Next.js and want fully translated HTML for search engines.

When to choose i18next

Every text must be translated or reviewed by a person.
You need exact control over plural forms, dates and numbers in each language.
You want a free, open-source library with no external service.

Moving from i18next to Magic Translate

You can switch one component at a time. Replace t('key') with the English text from your language file, wrapped in <T>, or use the useT hook for props and attributes. Both libraries can run side by side while you migrate.

Ready to try it? Follow the getting started guide to translate your first component in five minutes.