Intro

Neulich bin ich auf ein Next.js-AI-Chatbot-Template auf Vercel gestoßen. Zu meiner Überraschung war es nur auf Englisch verfügbar.

Also habe ich es internationalisiert. In 5 Minuten. So bin ich vorgegangen:

Schau es dir hier an.

Den Code findest du hier.

Warum internationalisieren?

Oft sind Entwickler so sehr darauf fokussiert, das Produkt zu bauen, dass sie die Nutzer vergessen. Für Apps wie AI‑Chatbots, die von Natur aus mehrsprachig sind und von jedem genutzt werden sollen – was bringt ein Chatbot, der nur Englisch unterstützt?

Die meisten Menschen auf der Welt sprechen nicht einmal Englisch. Tatsächlich sind es nur etwa 20 %. Wenn du an einem Startup arbeitest und dein Produkt nur auf Englisch verfügbar ist, verpasst du dann nicht über 80 % deiner potenziellen Kunden?

Es gibt einen guten Grund, warum die meisten Produkte nur auf Englisch verfügbar sind: Internationalisierung ist schwierig.

Bestehende Bibliotheken wie next-intl oder next-i18next sind mühsam einzurichten und zu verwenden. Und nicht nur das – sie übernehmen nicht einmal die Übersetzungen. Du musst immer noch Übersetzer beauftragen, Übersetzungsdateien mit Hunderten von Keys verwalten und dich mit all den anderen Schmerzpunkten der Internationalisierung herumschlagen. Sogar kleinere Textänderungen können Stunden bis Tage dauern, bis sie übersetzt sind.

Bis jetzt.

Ich habe an einer neuen Bibliothek namens gt-next gearbeitet, die es einfach macht, deine App in wenigen Minuten zu internationalisieren. Sie ist eine One‑Stop‑Shop‑Lösung für all deine Internationalisierungsanforderungen – einschließlich Übersetzungen, Routing und mehr.

Ich habe gt-next verwendet, um den Vercel‑AI‑Chatbot in 5 Minuten zu internationalisieren.

Installation

Ich habe damit begonnen, das Repository zu forken und zu klonen:

git clone https://github.com/vercel/ai-chatbot.git

Dann habe ich die Dependencies installiert:

npm install

Wenn du wie ich ebenfalls auf Abhängigkeitskonflikte stößt, probiere diesen Branch aus.

git clone -b base https://github.com/General-Translation/ai-chatbot.git

Als Nächstes habe ich die Pakete gt-next und gt-next-cli installiert.

npm install gt-next gt-next-cli

Konfiguration

Dann habe ich das CLI-Setup-Tool ausgeführt und bei jeder Frage „Ja“ ausgewählt:

npx gt-next-cli setup

Danach habe ich dem Plugin in next.config.js ein paar Sprachen hinzugefügt:

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // Französisch, Spanisch, Chinesisch
})

Ich hätte noch mehr Locales hinzufügen können, aber ich wollte den Chatbot nur mit ein paar verschiedenen Sprachen testen. Du kannst gerne so viele Locales hinzufügen, wie du möchtest!

Hier findest du eine Liste aller von gt-next unterstützten Locales.

Funktionsweise

Das Kernstück der Bibliothek ist die Komponente <T>.

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>Sie können beliebiges JSX als Kindelemente der {'<T>'}-Komponente schreiben.</p>
      <p>
        Sie können beispielsweise einen <a href="/">Link</a>
        schreiben und den Text kontextbezogen übersetzen lassen.
      </p>
      <div>
        <div>
          <p>Auch tief verschachtelte Komponenten werden kontextbezogen übersetzt.</p>
          <button>Klick mich!</button>
        </div>
      </div>
    </T>
  )
}

Alles, was in die <T>-Komponente eingebettet ist, kann übersetzt werden. Das CLI-Setup-Tool verwendet einen benutzerdefinierten Babel-Parser, um unseren Codebestand zu scannen und automatisch alle gefundenen React-Komponenten mit einem <T> zu umschließen.

Die Verwendung der <T>-Komponente hat mehrere Vorteile gegenüber anderen Bibliotheken:

• Du musst dich nie mit Dictionaries oder der Verwaltung von Keys herumschlagen.
• Übersetzungen sind immer aktuell und bleiben mit dem Code synchron.
• Übersetzungen enthalten automatisch alle umgebenden Kontextinformationen, was bessere Ergebnisse ermöglicht.

Ausführen des Chatbots

Natürlich habe ich auch alle Umgebungsvariablen angegeben.

cp .env.example .env.local

Ich musste ein kostenloses Konto im General Translation-Dashboard erstellen, um einen API-Schlüssel zu erhalten. Das waren nur ein paar Klicks.

Nachdem ich alle erforderlichen Umgebungsvariablen gesetzt hatte, habe ich den Chatbot gestartet:

npm run dev

Das war’s! Ich habe die Sprache meines Browsers auf Französisch umgestellt und die UI wurde auf Französisch angezeigt. Dasselbe für Spanisch und Chinesisch.

Einfach, oder?

Ich habe das Wechseln der Sprache noch einfacher gemacht, indem ich im Header des Chatbots einen Sprachwähler hinzugefügt habe.

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... bestehender Code ... */}
    <LocaleSelector />
    {/* ... bestehender Code ... */}
  );
}

Es funktionierte sofort.

Aufräumen

Auch wenn das CLI-Setup-Tool gute Arbeit beim Übersetzen aller React-Elemente geleistet hat, gab es ein paar lästige, fest codierte Strings.

Zum Beispiel enthielt die Datei model-selector.tsx einige fest codierte Beschreibungen von Chat-Modellen:

{
  id: 'chat-model-large',
  name: 'Großes Modell',
  description: 'Großes Modell für komplexe, mehrstufige Aufgaben',
},

Ich habe diese bereinigt, indem ich den useGT-Hook aus gt-next/client importiert und ihn zum Übersetzen der Strings verwendet habe:

import { useGT } from 'gt-next/client';
const t = useGT();
{
  id: 'chat-model-large',
  name: t('Großes Modell'),
  description: t('Großes Modell für komplexe, mehrstufige Aufgaben'),
},

Das war’s! Der gesamte Text im Chatbot war nun internationalisiert und in beliebigen Sprachen verfügbar.

Bereitstellung in der Produktion

Die Bereitstellung in der Produktion war sogar noch einfacher. Ich habe meine GT_API_KEY‑Umgebungsvariable durch einen Produktions‑API‑Schlüssel ersetzt und den translate‑Befehl ausgeführt:

npx gt-next-cli translate --locales es fr zh

Schließlich habe ich den Chatbot auf Vercel bereitgestellt.

Fazit

Die Internationalisierung des Chatbots war ein Kinderspiel. Ich musste mich nicht mit Konfigurationsdateien, Wörterbüchern oder komplexem Routing herumschlagen.

Innerhalb weniger Minuten hatte ich einen voll funktionsfähigen, internationalisierten KI-Chatbot, der auf Spanisch, Französisch und Chinesisch verfügbar war.

Wenn du dich für den Code interessierst, findest du ihn hier.

Wenn du General Translation nutzen möchtest, wirf einen Blick auf die Website, das GitHub-Repository oder die Dokumentation.