Schnellstart mit React
Glotstack mit yarn installieren
yarn install glotstack
Fügen Sie den Glotstack-Provider in Ihre React-App ein
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'

const importMethod = (locale: string) => {
  // Nutze fetch() aus statischen Verzeichnissen, um die Bundle-Größe zu optimieren. Deine Übersetzungen sollten in einem statischen Pfad gespeichert werden.
  return fetch(`/public/translations/${locale}.json`)
}
// // ODER implementiere Inline-Requires für integrierte Übersetzungen – funktioniert ohne dynamische Imports
const translations: Record<string, () => Promise<Translations>> = {
  'en-US': () => require('@/translations/en-US.json'),
  'pl-PL': () => require('@/translations/pl-PL.json'),
  'fr-FR': () => require('@/translations/fr-FR.json'),
};

const importMethod2 = (locale: string) => {
  return translations[locale]();
}

const Application = () => {
  const locale = 'en-US' // replace with your locale source
  return (
    <GlotstackProvider initialLocale={locale} importMethod={importMethod}>
      {/*<YourComponent />*/}
    </GlotstackProvider>
  )
}
Wann fetch oder import verwenden?
fetch() lädt Dateien aus statisch gehosteten Verzeichnissen, z. B. einem CDN – das hilft, die Bundle-Größe klein zu halten, ideal für begrenzte Umgebungen wie Cloudflare Workers. fetch() ist fast immer die bessere Wahl, es sei denn, deine Umgebung unterstützt keine dynamischen Imports – dann ist require() die beste Lösung mit etwas mehr Boilerplate. Für kleinere Anwendungen oder React Native empfehlen wir require() , um die Assets in deine Bundles zu integrieren.
useGlotstack() in deinen Komponenten verwenden
import * as React from 'react'
import {useGlotstack} from 'glotstack'

function MyComponent() => {
  const {t} = useGlotstack()

  return (
    <div>
      {t('Quickstart.example', {assigns: {userName: 'JD'}})}
      {/* Icon can be a function reference or a node */}
      {t('Quickstart.example2', {assigns: {Icon: <Icon/>}})}
    </div>
  )
}
Erstellen Sie Ihre Übersetzungsdatei
Du kannst deine Muttersprache verwenden, aber Glotstack verwendet standardmäßig en-US.json . Wir empfehlen, die Datei an einem Ort wie ./translations/en-US.json abzulegen. Wenn du dir Sorgen um die Bundle-Größe machst, kannst du die Größe reduzieren, indem du öffentliche Dateien wie ./public/translations/en-US.json verwendest.
Neu
Keine Lust auf JSON?
Versuche, deine Übersetzungen in YAML zu schreiben (wir machen das auch!)i18n mit YAML
Übersetzungen abrufen
Option 1
: Erstelle .glotstack.json in deinem Projekt
Du kannst den in der Konfiguration angegebenen API-Schlüssel verwenden. Du kannst 10 Übersetzungen ausführen, bevor du dich anmelden musst.
Führe get-translations aus
yarn glotstack get-translations
Demnächst! Live-Übersetzungen über yarn glotstack live-translate
Option 2:
Verwende das CLI, um deine Übersetzungen abzurufen
export GLOTSTACK_API_KEY="m65vOCKNspkd/5jYqIC7sJ9helOca39IQ1xAje0hO9GzhIg/YF139VVhZ8Zj6oZLWBQar4VoDS8fpzApW7CMGg==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR
Die Nutzung des Terminals ist erlaubt! Unsere Optionen ändern sich jedoch häufig, und es wäre für uns einfacher, einen Codemod für deine Konfiguration hinzuzufügen, als deine gespeicherten Befehle ständig zu aktualisieren.
© 2026 Glotstack.ai. Alle Rechte vorbehalten.
Glotstack ist ein entwicklerfreundlicher Lokalisierungs-Workflow für React: Verwalte Übersetzungen in YAML/JSON, halte Sprachen synchron und liefere neue Sprachen schneller mit KI-gestützten Tools.