Einstieg

Klicken Sie auf Ihr React-Framework, um loszulegen:

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‑Bibliotheken für Entwickler für React und Next.js
• Einen KI‑Übersetzungsdienst
• Ein vollständiges Infrastrukturpaket zum Bereitstellen von Übersetzungsinhalten

Wenn Sie GT‑Bibliotheken mit Ihrem eigenen Übersetzungsanbieter verwenden möchten, lesen Sie bitte unsere Standalone‑Dokumentation für gt-next und gt-react.

Wenn Sie Ihre eigene i18n‑Bibliothek verwenden, aber dennoch den KI‑Übersetzungsdienst von General Translation nutzen möchten, lesen Sie bitte die Dokumentation zu unserem CLI‑Tool.

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

npx gtx-cli@latest init

Starten Sie unseren Einrichtungsassistenten, um loszulegen!

Funktionen

⚛️ Ganze React-Komponenten 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 neben Ihrem Code.
  • Keine Keys, Strings oder zusätzlichen files erforderlich!
• Die Bibliothek übernimmt die gesamte i18n-Logik im Hintergrund, sodass Sie sich nicht darum kümmern müssen.
• Übersetzungen bleiben stets mit Ihrem Quellcode synchron.
• Übersetzungen enthalten Kontextinformationen zum Inhalt und sind daher präziser.

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

🔎 Funktionsgleichheit mit bestehenden Bibliotheken

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

🧠 Kostenloser KI-gestützter Übersetzungsservice

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

🔧 Entwicklerfreundlich

• Das Setup ist einfach und in wenigen Minuten erledigt.
• 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.
• Kein Zeitverlust mehr beim Verwalten von Übersetzungsschlüsseln wie t('menu.header.title').
  • Schreiben Sie einfach alles inline!

Siehe unser GitHub-Repo für den Quellcode und einige Beispielprojekte.

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 bestehenden i18n‑Bibliothek nutzen.

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

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

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

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 untergeordneten Elemente 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

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 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 klassischen Wörterbuch-Ansatz bevorzugen, Ihre 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 „Hello, world!"
}

4. Übersetzte Inhalte in der Entwicklung ansehen

Keine Sorge, wie die UI in verschiedenen Sprachen aussieht – General Translation übersetzt Ihre Inhalte in Echtzeit, während Sie sie verfassen.

Anstatt Ihre UI in der Produktion mehrfach überarbeiten 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 vorliegen. Für Next.js bieten die GT‑Bibliotheken die Möglichkeit, Inhalte on demand zu übersetzen.

Typische Anwendungsfälle sind:

• Nutzerspezifische Informationen
• Entfernt gespeicherte Inhalte
• Dynamisch generierte Inhalte

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, global durchzustarten? Übersetze deine App in wenigen Minuten und erreiche Nutzer weltweit!