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

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/v1/widget.bundle.js"
          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/v1/widget.bundle.js" async></script>
</body>