Magic Translate vs. next-intl

next-intl является наиболее широко используемой библиотекой i18n для Next.js. Она работает с компонентами App Router и React Server и построена на основе файлов сообщений с ключом для каждого сообщения. Magic Translate также отображает полностью переведенные страницы на сервере, но вы пишете текст прямо в своих компонентах, и переводы создаются для вас.

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

	Magic Translate	next-intl
Как вы пишете текст	Ваши собственные слова, завернутые в `<T>`	Ключ для каждого сообщения, например `t('title')`
Переводы	Перевод AI, созданный автоматически	Вы или ваши переводчики пишете их
Файлы сообщений	Нет	Один файл JSON на каждый язык
Новые языки	Добавьте локаль в свой список	Переводите каждое сообщение на новый язык
Рендеринг на сервере	Компоненты React Server, полностью переведенный HTML	Компоненты React Server, полностью переведенный HTML
Локальная маршрутизация	Используйте сегмент `[locale]`	Встроенная маршрутизация и промежуточное ПО
Цена	Бесплатный план, затем ежемесячные планы в зависимости от использования	С открытым исходным кодом и бесплатно

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

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

// messages/en.json
{ "HomePage": { "title": "Welcome to our website" } }

// app/[locale]/page.tsx
import { getTranslations } from 'next-intl/server';

export default async function HomePage() {
  const t = await getTranslations('HomePage');
  return <h1>{t('title')}</h1>;
}

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

// app/[locale]/page.tsx
import { createLocalizedT } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

export default async function HomePage({
  params
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { T } = createLocalizedT(translate, locale);

  return (
    <h1>
      <T>Welcome to our website</T>
    </h1>
  );
}

В руководстве по Next.js показана полная настройка.

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

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

Когда выбирать next-intl

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

Использование обоих

Можно оставить next-intl для маршрутизации и форматирования локалей и использовать Magic Translate для текста. Передайте локаль с next-intl на createLocalizedT и заменяйте ключи на <T> по одной странице за раз.

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