Erste Schritte

Wähle dein React-Framework aus, um zu beginnen:

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 ausliefern können.

General Translation umfasst Folgendes:

• Open‑Source‑Bibliotheken für Entwickler für React und Next.js
• Einen KI‑Übersetzungsdienst
• Ein vollständiges Infrastrukturpaket zum Ausliefern von Übersetzungsinhalten

Wenn Sie GT‑Bibliotheken mit Ihrem eigenen Übersetzungsanbieter verwenden möchten, finden Sie eigenständige Dokumentation zu 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 Dokumentation zum CLI‑Tool.

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

npx gtx-cli@latest

Starten Sie unseren Einrichtungsassistenten, um loszulegen!

Funktionen

⚛️ Ganze React-Komponenten direkt inline übersetzen

• Eine einzelne öffnende und schließende <T>-Komponente genügt, um eine komplette React-Komponente zu übersetzen.
  • Kein komplexes Refactoring und keine unübersichtlichen Funktionsaufrufe nötig.
• Der Inhalt steht inline und direkt in Ihrem Code.
  • Keine Keys, Strings oder zusätzlichen files erforderlich!
• Die Bibliothek übernimmt die gesamte i18n-Logik im Hintergrund – Sie müssen sich nicht darum kümmern.
• Übersetzungen bleiben stets mit Ihrem Quellcode synchron.
• Übersetzungen enthalten Kontext zum Inhalt und sind dadurch präziser.

export default function Page() {
  return (
    <T>
      <p>Sie können beliebiges JSX als children der {'<T>'}-Komponente verwenden.</p>
      <p>
        Sie könnten zum Beispiel einen <a href='/'>Link</a> einfügen, dessen Text im Kontext
        übersetzt wird.
      </p>
      <div>
        <div>
          <p>Selbst tief verschachtelte Komponenten werden im Kontext übersetzt.</p>
          <button>Klick mich an!</button>
        </div>
      </div>
    </T> 
  );
}

🔎 Funktionsgleichheit mit bestehenden Bibliotheken

• GT-Bibliotheken unterstützen die gleichen Features wie etablierte Bibliotheken wie i18next, react-intl und next-intl.
• Features wie Dictionaries, Pluralformen, Währungen und automatisches Routing werden vollständig unterstützt.

🧠 Kostenloser KI-gestützter Übersetzungsdienst

• Unser kostenloser, KI-gestützter Übersetzungsdienst ermöglicht dir, in Sekundenschnelle Übersetzungen für deine App zu erstellen.
• Translation Hot Reload aktualisiert deine Übersetzungen automatisch, während du sie erstellst.
• HTML-Inhalte werden je nach Sprache neu angeordnet und angepasst.

🔧 Entwicklerfreundlich

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

Sehen Sie sich unser GitHub-Repository für den Quellcode und einige Beispielprojekte an.

Warum General Translation?

General Translation ist ein kompletter i18n‑Stack mit 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 nutzen.

Für ein nahtloses End‑to‑End‑i18n‑Erlebnis empfehlen wir, unsere Bibliotheken zusammen mit unserem Übersetzungsdienst zu verwenden.

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

1. Übersetzen Sie ganze React-Komponenten, nicht nur Strings

UI, die als children an die <T>-Komponente übergeben wird, wird unabhängig von der Komplexität des JSX-Baums übersetzt. Zum Beispiel:

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>
        Alle Children des <b>{`<T>`}-Components</b> werden übersetzt.
      </p>
      <p>
        Dinge wie <a href='/'>Links</a>
        {', '}
        <button>Buttons</button>
        {', '}
        und sogar{' '}
        <div>
          {' '}
          <div>
            {' '}
            <div> tief verschachtelte Components </div>{' '}
          </div>{' '}
        </div>{' '}
        werden übersetzt.
      </p>
    </T> 
  );
}

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

Dank 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 dictionaries schreiben

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

import { T } from 'gt-next';

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

Alternativ kannst du, wenn du den klassischen Wörterbuch-Ansatz bevorzugst, deine Inhalte in einer Wörterbuchdatei schreiben:

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

const dictionary = {
  greeting: "Hello, world!"
}
export default dictionary;

const dictionary = {
  greeting: "Hello, world!" 
}
export default dictionary;

import { useTranslations } from "gt-next";

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

4. Übersetzte Inhalte während der Entwicklung ansehen

Machen Sie sich keine Gedanken darüber, wie die UI in verschiedenen Sprachen aussieht – General Translation übersetzt Ihre Inhalte in Echtzeit automatisch, während Sie sie verfassen.

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

Möchten Sie sehen, wie Ihre UI‑Elemente auf Deutsch aussehen, bevor Sie deployen? Kein Problem – General Translation übersetzt sie automatisch für Sie!

5. Inhalte bei Bedarf übersetzen

Apps müssen häufig Inhalte übersetzen, die erst zur Laufzeit bekannt sind. Für Next.js unterstützen die GT-Bibliotheken das Übersetzen von Inhalten bei Bedarf.

Einige gängige Beispiele sind:

• Benutzerbezogene Informationen
• Entfernt gespeicherte Inhalte
• Inhalte, die dynamisch generiert werden

Sobald die Übersetzung geladen ist, wird Ihre Komponente in Echtzeit mit den neuen Übersetzungen aktualisiert.

Erste Schritte

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 für den globalen Rollout? Übersetze deine App in wenigen Minuten und erreiche Nutzer weltweit!