Schnellstart

Erste Schritte

Klicken Sie auf Ihr React-Framework, um zu beginnen:

Alternativ können Sie den Setup-Assistenten ausführen.

npx gtx-cli@latest

Was ist General Translation?

General Translation ist ein vollständiger 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 vollständiges Infrastrukturpaket zur Bereitstellung von Übersetzungsinhalten

Wenn Sie die GT-Bibliotheken mit Ihrem eigenen Übersetzungsanbieter verwenden möchten, lesen Sie bitte unsere eigenständigen Dokumentationen für gt-next und gt-react.

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

Wenn Sie General Translation verwenden möchten, um Ihre JSON-, Markdown- oder MDX-Dateien zu übersetzen, lesen Sie bitte unsere CLI-Tool Dokumentation.

npx gtx-cli@latest init

Führen Sie unseren Einrichtungsassistenten aus, um loszulegen!

Funktionen

⚛️ Ganze React-Komponenten direkt übersetzen

• Ein einziges öffnendes und schließendes <T>-Komponentenelement reicht aus, um eine gesamte React-Komponente zu übersetzen.
  • Kein komplexes Refactoring oder umständliche Funktionsaufrufe nötig.
• Der Inhalt bleibt direkt im Code und an derselben Stelle.
  • Keine Schlüssel, Zeichenketten oder zusätzliche Dateien erforderlich!
• Die Bibliothek übernimmt die gesamte i18n-Logik im Hintergrund, sodass du dich nicht darum kümmern musst.
• Übersetzungen bleiben immer mit deinem Quellcode synchronisiert.
• Übersetzungen enthalten kontextuelle Informationen über den Inhalt und sind dadurch genauer.

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

🔎 Funktionsgleichheit mit bestehenden Bibliotheken

• GT-Bibliotheken unterstützen 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 dir, Übersetzungen für deine App in Sekundenschnelle zu erstellen.
• Translation Hot Reload aktualisiert deine Übersetzungen automatisch, während du schreibst.
• HTML-Inhalte werden je nach Sprache neu angeordnet und angepasst.

🔧 Entwicklerfreundlich

• Die Einrichtung ist einfach und in wenigen Minuten erledigt.
• Alle GT-Bibliotheken sind Open Source und funktionieren eigenständig.
  • Du kannst deinen eigenen Übersetzungsanbieter nutzen oder unseren kostenlosen KI-gestützten Übersetzungsdienst verwenden.
• Kein Zeitverlust mehr beim Verwalten von Übersetzungsschlüsseln wie t('menu.header.title').
  • Schreibe einfach alles direkt im Code!

Sieh dir unser Github-Repository für den Quellcode und einige Beispielprojekte an.

Warum General Translation wählen?

General Translation ist ein kompletter 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 Übersetzungsservice mit Ihrer eigenen i18n-Bibliothek verwenden.

Für eine nahtlose, durchgängige i18n-Erfahrung empfehlen wir die Verwendung unserer Bibliotheken mit unserem Übersetzungsservice.

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

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

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

import { T } from "gt-next";

export default function Page() {
  return (
    <T>
      <p>Alle Children der <b>{`<T>`}-Komponente</b> werden übersetzt.</p>
      <p>
        Dinge wie <a href="/">Links</a>{', '}
        <button>Buttons</button>{', '}
        und sogar <div> <div> <div> tief verschachtelte Komponenten </div> </div> </div> werden übersetzt.
      </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>
      Hallo, <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>
      Hallo, <Var>{name}</Var>
    </T>
  );
}

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

JSX-Inhalte, die innerhalb einer <T>-Komponente platziert werden, werden zur Übersetzung markiert:

import { T } from "gt-next";

export default function Page() {
  return (
    <T>
      <p>Hallo, Welt!</p>  {/* übersetzt <p>Hallo, Welt!</p> */}
    </T>
  )
}

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

{
  "greeting": "Hallo, Welt!"
}

const dictionary = {
  greeting: "Hallo, Welt!"
}
export default dictionary;

const dictionary = {
  greeting: "Hallo, Welt!" 
}
export default dictionary;

import { useTranslations } from "gt-next";

export default function Page() {
  const t = useTranslations();
  return t('greeting'); // übersetzt "Hallo, Welt!"
}

4. Übersetzte Inhalte in der Entwicklung anzeigen

Sie müssen sich keine Sorgen darüber machen, wie die UI in verschiedenen Sprachen aussieht, General Translation wird Ihre Inhalte automatisch in Echtzeit übersetzen, während Sie sie schreiben.

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

Müssen Sie sehen, wie Ihre UI-Elemente auf Deutsch aussehen, bevor Sie sie bereitstellen? Kein Problem, General Translation wird sie automatisch für Sie übersetzen!

5. Inhalte on-demand ü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 on-demand zu übersetzen.

Einige häufige Beispiele sind:

• Benutzerspezifische Informationen
• Remote gespeicherte Inhalte
• Dynamisch generierte Inhalte

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

Loslegen

npm i gt-next

yarn add gt-next

bun add gt-next

pnpm add gt-next

npm i gt-react

yarn add gt-react

bun add gt-react

pnpm add gt-react

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