Magic Translate vs. next-intl

next-intl est la bibliothèque i18n la plus utilisée pour Next.js. Il fonctionne avec les composants App Router et React Server et repose sur des fichiers de messages avec une clé pour chaque message. Magic Translate affiche également les pages entièrement traduites sur le serveur, mais tu écris ton texte directement dans tes composants, et les traductions sont créées pour toi.

En un coup d'œil

	Magic Translate	next-intl
Comment tu écris le texte	Tes propres mots, encadrés par `<T>`	Une touche pour chaque message, par exemple `t('title')`
Traductions	Traduction par IA, créée automatiquement	C'est toi ou tes traducteurs qui les rédigent
Fichiers de messages	Aucun	Un fichier JSON par langue
Nouvelles langues	Ajoute le lieu à ta liste	Traduire chaque message dans la nouvelle langue
Rendu sur serveur	React Server Components, HTML entièrement traduit	React Server Components, HTML entièrement traduit
Routage local	Utilise un segment `[locale]`	Routage et intergiciel intégrés
Prix	Forfait gratuit, puis forfaits mensuels en fonction de l'utilisation	Open source et gratuit

En quoi le code diffère-t-il

Avec next-intl, tu contiens un fichier de messages pour chaque langue et tu fais référence à chaque message par sa touche :

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

Avec Magic Translate, le texte reste sur la page :

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

Le guide Next.js montre la configuration complète.

Quand choisir Magic Translate

Tu veux que ton site Next.js soit disponible dans de nombreuses langues sans gérer de fichiers de messages.
Ton texte change souvent et tu veux que chaque langue soit à jour.
Tu n'as pas de traducteurs ou tu souhaites publier des mises à jour sans attendre les traductions.

Quand choisir next-intl

Tout le texte doit être traduit ou révisé par une personne.
Tu dois contrôler exactement les pluriels, les dates et les chiffres avec les messages ICU.
Tu veux une bibliothèque open source gratuite, sans service externe.

Utiliser les deux

Tu peux conserver next-intl pour le routage et la mise en forme des paramètres régionaux, et utiliser Magic Translate pour le texte. Transmet les paramètres régionaux de next-intl à createLocalizedT, et remplace les touches par <T>, page par page.

Prête à l'essayer ? Suis le guide de démarrage pour traduire ton premier composant en cinq minutes.