Magic Translate vs. next-intl

next-intl é a biblioteca i18n mais usada para Next.js. Ele funciona com os componentes do App Router e do React Server e é construído em torno de arquivos de mensagem com uma chave para cada mensagem. Magic Translate também renderiza páginas totalmente traduzidas no servidor, mas você escreve seu texto diretamente em seus componentes e as traduções são criadas para você.

Em um piscar de olhos

	Magic Translate	next-intl
Como você escreve texto	Suas próprias palavras, embrulhadas em `<T>`	Uma chave para cada mensagem, como `t('title')`
Traduções	Tradução de IA, criada automaticamente	Você ou seus tradutores os escrevem
Arquivos de mensagens	Nenhum	Um arquivo JSON por idioma
Novos idiomas	Adicione a localidade à sua lista	Traduza todas as mensagens para o novo idioma
Renderização do servidor	Componentes do React Server, HTML totalmente traduzido	Componentes do React Server, HTML totalmente traduzido
Roteamento local	Use um segmento `[locale]`	Roteamento e middleware integrados
Preço	Plano gratuito e, em seguida, planos mensais com base no uso	Código aberto e gratuito

Como o código difere

Com next-intl, você mantém um arquivo de mensagem para cada idioma e se refere a cada mensagem por sua chave:

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

Com Magic Translate, o texto permanece na página:

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

O guia Next.js mostra a configuração completa.

Quando escolher Magic Translate

Você quer seu site Next.js em vários idiomas sem manter os arquivos de mensagens.
Seu texto muda com frequência e você quer que todos os idiomas se mantenham atualizados.
Você não tem tradutores ou deseja lançar atualizações sem esperar pelas traduções.

Quando escolher next-intl

Todo o texto deve ser traduzido ou revisado por uma pessoa.
Você precisa de controle exato sobre plurais, datas e números com as mensagens ICU.
Você quer uma biblioteca gratuita e de código aberto sem serviço externo.

Usando os dois

Você pode manter next-intl para roteamento e formatação de localidade e usar Magic Translate para o texto. Passe a localidade de next-intl para createLocalizedT e substitua as chaves por <T>, uma página por vez.

Pronto para experimentar? Siga o guia de introdução para traduzir seu primeiro componente em cinco minutos.