Magic Translate vs. next-intl

next-intl es la biblioteca i18n más utilizada para Next.js. Funciona con los componentes App Router y React Server, y se basa en archivos de mensajes con una clave para cada mensaje. Magic Translate también renderiza las páginas totalmente traducidas en el servidor, pero tú escribes el texto directamente en tus componentes y las traducciones se crean para ti.

De un vistazo

	Magic Translate	next-intl
Cómo escribes el texto	Tus propias palabras, envueltas en `<T>`	Una clave para cada mensaje, como `t('title')`
Traducciones	Traducción mediante IA, creada automáticamente	Tú o tus traductores los escribís
Archivos de mensajes	Ninguna	Un archivo JSON por idioma
Nuevos idiomas	Añade la ubicación a tu lista	Traduce todos los mensajes al nuevo idioma
Procesamiento de servidores	React Server Components, HTML totalmente traducido	React Server Components, HTML totalmente traducido
Enrutamiento local	Usa un segmento `[locale]`	Enrutamiento y middleware integrados
Precio	Plan gratuito, luego planes mensuales según el uso	De código abierto y gratis

En qué se diferencia el código

Con next-intl, guardas un archivo de mensajes para cada idioma y haces referencia a cada mensaje por su clave:

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

Con Magic Translate, el texto permanece en la 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>
  );
}

La guía Next.js muestra la configuración completa.

Cuándo elegir Magic Translate

Quieres que tu sitio Next.js esté en muchos idiomas sin mantener los archivos de mensajes.
Tu texto cambia con frecuencia y quieres que todos los idiomas estén actualizados.
No tienes traductores o quieres publicar las actualizaciones sin esperar a que se traduzcan.

Cuándo elegir next-intl

Todo el texto debe estar traducido o revisado por una persona.
Necesitas un control exacto sobre los plurales, las fechas y los números con los mensajes ICU.
Quieres una biblioteca gratuita y de código abierto sin servicio externo.

Usar ambos

Puedes quedarte con el next-intl para la configuración regional, el enrutamiento y el formato, y usar el Magic Translate para el texto. Pasa la configuración regional del next-intl al createLocalizedT y sustituye las claves por <T> página por página.

¿Estás listo para probarlo? Sigue la guía de inicio para traducir tu primer componente en cinco minutos.