React- und Next.js-Apps übersetzen — ohne i18n-Bibliotheken

react-i18next, next-intl oder Lingui einzurichten bedeutet, jeden Text zu umschließen, Routen umzustrukturieren und Übersetzungsdateien zu pflegen. Lingvit überspringt all das — ein Script, keine Komponentenänderungen, keine Build-Zeit-Texte.

Wann Lingvit die richtige Wahl für React ist

✓Sie haben eine bestehende App und möchten nicht jede Komponente umbauen
✓Übersetzungen müssen schnell live gehen — Tage statt Wochen
✓Nicht-technische Teammitglieder müssen Übersetzungen prüfen und bearbeiten können
✓Ihre Texte ändern sich häufig, und Sie möchten keinen Redeployment-Zyklus pro Übersetzungsänderung

Wenn Sie tief integrierte RTL-Layouts, lokale Währungs-/Zahlenformatierung oder typsichere Übersetzungsschlüssel zur Kompilierzeit benötigen, ist eine vollständige i18n-Bibliothek weiterhin das richtige Werkzeug. Lingvit ist dafür da, schnell mehrsprachig zu werden.

Next.js App Router

Nutzen Sie die integrierte Script-Komponente von Next.js mitstrategy="afterInteractive", um Lingvit nach der Hydration zu laden:

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.lingvit.com/widget.bundle.js?v=1"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Der MutationObserver von Lingvit erkennt Inhalte, die nach der Hydration gerendert werden, sodass dynamisch geladene Komponenten, Routenwechsel und lazy geladene Bereiche allesamt übersetzt werden.

Vite / Create React App

Fügen Sie für Vite- oder CRA-Projekte das Script-Tag in Ihre Root-index.html ein:

<!-- index.html (Vite / CRA) -->
<body>
  <div id="root"></div>
  <script src="https://cdn.lingvit.com/widget.bundle.js?v=1" async></script>
</body>

Weitere Anleitungen

Werden Sie mehrsprachig, ohne Ihre App umzubauen

Ein Script, jede React-App, mit einem monatlichen Zeichenkontingent.

Jetzt loslegen Drei-Schritte-Anleitung ansehen