Magic Translate vs. next-intl

next-intl è la libreria i18n più utilizzata per Next.js. Funziona con App Router e React Server Components ed è basato su file di messaggi con una chiave per ogni messaggio. Magic Translate esegue anche il rendering delle pagine completamente tradotte sul server, ma tu scrivi il testo direttamente nei tuoi componenti e le traduzioni vengono create per te.

A colpo d'occhio

	Magic Translate	next-intl
Come scrivi un testo	Parole tue, racchiuse in `<T>`	Una chiave per ogni messaggio, ad esempio `t('title')`
Traduzioni	traduzione AI, creata automaticamente	Li scrivete tu o i tuoi traduttori
File di messaggi	Nessuna	Un file JSON per lingua
Nuove lingue	Aggiungi le impostazioni locali alla tua lista	Traduci ogni messaggio nella nuova lingua
Rendering del server	Componenti React Server, HTML completamente tradotto	Componenti React Server, HTML completamente tradotto
Locale routing	Usa un segmento `[locale]`	Routing e middleware integrati
Prezzo	Piano gratuito, poi piani mensili in base all'utilizzo	Open source e gratuito

In che modo il codice è diverso

Con next-intl, conservi un file di messaggi per ogni lingua e fai riferimento a ogni messaggio con la sua chiave:

// 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, il testo rimane nella pagina:

// 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 guida Next.js mostra la configurazione completa.

Quando scegliere Magic Translate

Vuoi che il tuo sito Next.js sia in molte lingue senza gestire i file dei messaggi.
Il tuo testo cambia spesso e desideri che tutte le lingue rimangano aggiornate.
Non hai traduttori o vuoi rilasciare aggiornamenti senza aspettare le traduzioni.

Quando scegliere next-intl

Tutto il testo deve essere tradotto o revisionato da una persona.
Hai bisogno di un controllo preciso su plurali, date e numeri con i messaggi ICU.
Vuoi una libreria open source gratuita senza servizi esterni.

Usando entrambi

Puoi mantenere next-intl per il routing e la formattazione locale e usare Magic Translate per il testo. Passa la lingua da next-intl a createLocalizedT e sostituisci le chiavi con <T> una pagina alla volta.

Pronto a provarlo? Segui la guida introduttiva per tradurre il tuo primo componente in cinque minuti.