Einführung

Erste Schritte

Wir haben Schnellstartanleitungen für viele beliebte React-Frameworks.

Was ist General Translation?

General Translation ist ein komplettes Internationalisierungs-Stack (i18n), mit dem Sie mehrsprachige Apps schnell und einfach bereitstellen können.

General Translation umfasst Folgendes:

• Open-Source-Entwicklerbibliotheken für React und Next.js
• Einen KI-Übersetzungsdienst
• Ein komplettes Infrastrukturpaket für die Bereitstellung von Übersetzungsinhalten

Wenn Sie GT-Bibliotheken mit Ihrem eigenen Übersetzungsanbieter verwenden möchten, lesen Sie bitte unsere Standalone-Dokumentation.

Wenn Sie Ihre eigene i18n-Bibliothek verwenden möchten, aber dennoch den KI-Übersetzungsdienst von General Translation nutzen möchten, lesen Sie bitte unsere Dokumentation zum CLI-Tool.

Wenn Sie General Translation zum Übersetzen Ihrer JSON-, Markdown- oder MDX-Dateien verwenden möchten, lesen Sie bitte unsere Dokumentation zum CLI-Tool.

npx gtx-cli@latest init

Führen Sie unseren Einrichtungsassistenten aus, um loszulegen!

Funktionen

⚛️ Übersetzen Sie gesamte React-Komponenten inline

• Eine einzige öffnende und schließende <T>-Komponente ist alles, was Sie benötigen, um eine gesamte React-Komponente zu übersetzen.
  • Kein Bedarf für komplexes Refactoring oder unübersichtliche Funktionsaufrufe.
• Inhalte sind inline und an der gleichen Stelle wie Ihr Code.
  • Keine Schlüssel, Strings oder zusätzliche Dateien erforderlich!
• Die Bibliothek verwaltet die gesamte i18n-Logik im Hintergrund, sodass Sie das nicht tun müssen.
• Übersetzungen werden immer mit Ihrem Quellcode synchronisiert.
• Übersetzungen enthalten kontextbezogene Informationen über den Inhalt, wodurch sie genauer sind.

export default function Page() {
  return (
    <T>
      <p>You can write any JSX as children of the {"<T>"} component.</p>
      <p>
        For example, you could write a <a href="/">link</a> and have the text be
        translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T> 
  );
}

🔎 Funktionsparität mit bestehenden Bibliotheken

• GT-Bibliotheken unterstützen auch die gleichen Funktionen wie bestehende Bibliotheken wie i18next, react-intl und next-intl.
• Funktionen wie Wörterbücher, Pluralformen, Währungen und automatisches Routing werden alle unterstützt.

🧠 Kostenloser KI-gestützter Übersetzungsdienst

• Unser kostenloser KI-gestützter Übersetzungsdienst ermöglicht es Ihnen, Übersetzungen für Ihre App in Sekunden zu erstellen.
• Übersetzungs-Hot-Reload aktualisiert Ihre Übersetzungen automatisch, während Sie sie schreiben.
• HTML-Inhalte werden je nach Sprache neu angeordnet und angepasst.

🔧 Entwicklerfreundlich

• Die Einrichtung ist einfach und kann in Minuten erledigt werden.
• Alle GT-Bibliotheken sind Open-Source und funktionieren eigenständig.
  • Sie können Ihren eigenen Übersetzungsanbieter verwenden oder unseren kostenlosen KI-gestützten Übersetzungsdienst nutzen.
• Keine Zeitverschwendung mehr mit der Verwaltung von Übersetzungsschlüsseln wie t('menu.header.title').
  • Schreiben Sie einfach alles inline!

Sehen Sie sich unser Github-Repo für den Quellcode und einige Beispielprojekte an.

Warum General Translation wählen?

General Translation ist ein komplettes i18n-Stack, einschließlich Entwicklerbibliotheken, KI-Übersetzungen und einem vollständigen Infrastrukturpaket für mehrsprachige Apps.

Sie können unsere Bibliotheken mit Ihrem eigenen Übersetzungsanbieter kombinieren oder unseren kostenlosen KI-gestützten Übersetzungsdienst mit Ihrer eigenen i18n-Bibliothek verwenden.

Für ein nahtloses, umfassendes i18n-Erlebnis empfehlen wir die Verwendung unserer Bibliotheken mit unserem Übersetzungsdienst.

Mit GT-Bibliotheken wie gt-react und gt-next können Sie:

1. Ganze React-Komponenten übersetzen, nicht nur Zeichenketten

UI, die als Kinder der <T>-Komponente übergeben wird, wird unabhängig davon übersetzt, wie komplex der JSX-Baum ist. Zum Beispiel:

import { T } from "gt-next";
 
export default function Page() {
  return (
    <T>
      <p>Any children of <b>the {`<T>`} component</b> will be translated.</p>
      <p>
        Things like <a href="/">links</a>{', '}
        <button>buttons</button>{', '}
        and even <div> <div> <div> deeply nested components </div> </div> </div>  are translated.
      </p>
    </T> 
  );
}

2. Sowohl Client- als auch Server-Komponenten übersetzen

Mit erstklassiger Unterstützung für den Next.js App Router und React Server Components, können Sie sowohl Client- als auch Server-Komponenten übersetzen.

import getName from "@/getName";
import { T, Var } from "gt-next";
 
export default async function MyServerComponent() {
  const name = await getName();
 
  return (
    <T>
      Hello, <Var>{name}</Var>
    </T>
  );
}

"use client";
 
import { useState } from "react";
import { T, Var } from "gt-next";
 
export default function MyClientComponent() {
  const [name, setName] = useState("Alice");
 
  return (
    <T>
      Hello, <Var>{name}</Var>
    </T>
  );
}

3. Inhalte inline oder in Wörterbüchern schreiben

JSX-Inhalte, die in einer <T>-Komponente platziert werden, sind für die Übersetzung markiert:

import { T } from "gt-next";
 
export default function Page() {
  return (
    <T>
      <p>Hello, World!</p>  {/* translates <p>Hello, World!</p> */}
    </T>
  )
}

Alternativ, wenn Sie den traditionellen Wörterbuch-Ansatz bevorzugen, können Sie Ihre Inhalte in einer Wörterbuchdatei schreiben:

{
  "greeting": "Hello, World!"
}

import { useDict } from "gt-next";
 
export default function Page() {
  const d = useDict();
  return d('greeting'); // translates "Hello, World!"
}

4. Übersetzte Inhalte in der Entwicklung anzeigen

Sie müssen sich keine Gedanken darüber machen, wie die Benutzeroberfläche in verschiedenen Sprachen aussieht, General Translation übersetzt Ihre Inhalte automatisch in Echtzeit, während Sie sie schreiben.

Anstatt Ihre Benutzeroberfläche mehrmals in der Produktion überarbeiten zu müssen, schreiben Sie Ihre Inhalte einmal auf Englisch und lassen Sie General Translation den Rest erledigen.

Möchten Sie vor der Bereitstellung sehen, wie Ihre UI-Elemente auf Deutsch aussehen? Kein Problem, General Translation übersetzt sie automatisch für Sie!

5. Inhalte bei Bedarf übersetzen

Apps müssen oft Inhalte übersetzen, die erst zur Laufzeit bekannt sind. Für Next.js unterstützen GT-Bibliotheken die Möglichkeit, Inhalte bei Bedarf zu übersetzen.

Einige häufige Beispiele sind:

• Benutzerspezifische Informationen
• Remote gespeicherte Inhalte
• Dynamisch generierte Inhalte

Sobald die Übersetzung geladen ist, wird Ihre Komponente in Echtzeit mit dem neuen Übersetzungsinhalt umgeschrieben.

Erste Schritte

npm i gt-next

Bereit, global zu werden? Beginne in wenigen Minuten mit der Übersetzung deiner App und erreiche Nutzer weltweit!