Magic Translate vs. next-intl

next-intl ist die am häufigsten verwendete i18n-Bibliothek für Next.js. Es funktioniert mit dem App Router und den React Server-Komponenten und basiert auf Nachrichtendateien mit einem Schlüssel für jede Nachricht. Magic Translate rendert auch vollständig übersetzte Seiten auf dem Server, aber du schreibst deinen Text direkt in deine Komponenten, und die Übersetzungen werden für dich erstellt.

Auf einen Blick

	Magic Translate	next-intl
Wie schreibst du Text	Deine eigenen Worte, verpackt in `<T>`	Ein Schlüssel für jede Nachricht, wie `t('title')`
Übersetzungen	KI-Übersetzung, automatisch erstellt	Du oder deine Übersetzer schreiben sie.
Nachrichtendateien	Keine	Eine JSON-Datei pro Sprache
Neue Sprachen	Füge das Gebietsschema zu deiner Liste hinzu	Übersetze jede Nachricht in die neue Sprache
Server-Rendern	React Server Components, vollständig übersetztes HTML	React Server Components, vollständig übersetztes HTML
Lokales Routing	Verwende ein `[locale]`-Segment	Integriertes Routing und Middleware
Preis	Kostenloses Abo, dann monatliche Tarife je nach Nutzung	Open Source und kostenlos

Wie sich der Code unterscheidet

Mit next-intl führst du eine Nachrichtendatei für jede Sprache und bezeichnest jede Nachricht mit ihrem Schlüssel:

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

Mit Magic Translate bleibt der Text auf der Seite:

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

Die Anleitung zu Next.js zeigt die vollständige Einrichtung.

Wann wähle ich Magic Translate

Du möchtest deine Next.js -Seite in vielen Sprachen haben, ohne Nachrichtendateien zu pflegen.
Dein Text ändert sich oft und du möchtest, dass jede Sprache auf dem neuesten Stand bleibt.
Du hast keine Übersetzer oder du möchtest Updates veröffentlichen, ohne auf Übersetzungen zu warten.

Wann wähle ich next-intl

Der gesamte Text muss von einer Person übersetzt oder überprüft werden.
Du benötigst genaue Kontrolle über Pluralformen, Daten und Zahlen mit ICU-Nachrichten.
Du möchtest eine kostenlose Open-Source-Bibliothek ohne externen Dienst.

Benutze beide

Du kannst next-intl für die lokale Weiterleitung und Formatierung behalten und Magic Translate für den Text verwenden. Übergib das Gebietsschema von next-intl auf createLocalizedT und ersetze die Schlüssel seitenweise durch <T>.

Bereit, es zu versuchen? Folge der Anleitung für die ersten Schritte, um deine erste Komponente in fünf Minuten zu übersetzen.