loadTranslations()

Übersicht

Verwenden Sie loadTranslations(), um das Ladeverhalten von Übersetzungen festzulegen. Standardmäßig lädt Ihre App Übersetzungen vom GT CDN in der Produktion. Sie können eine loadTranslations()-Funktion angeben, um Übersetzungen aus einer anderen Quelle zu laden, wie zum Beispiel:

• Aus dem Bundle Ihrer App (am häufigsten)
• Aus einer Datenbank
• Von einer API
• Von einem anderen CDN

Wir haben die Unterstützung für das Laden von Übersetzungen aus lokalen Dateien im Bundle Ihrer App integriert. Folgen Sie diesem Leitfaden, um lokale Übersetzungen in Ihrer Next.js-App einzurichten.

Wenn Sie daran interessiert sind, Ihre eigenen Übersetzungen manuell zu definieren, schauen Sie sich den Leitfaden für benutzerdefinierte Übersetzungen und die loadDictionary()-Funktion an.

Referenz

Parameter

Beschreibung

Rückgabewerte

Ein Promise<any>, das zu einem Wörterbuch aufgelöst wird, das IDs den Übersetzungen für das gegebene Gebietsschema zuordnet.

Einrichtung

Definieren Sie Ihre loadTranslations() als den Standardexport für eine Datei mit dem Namen loadTranslations.js oder loadTranslations.ts entweder im src/-Verzeichnis oder im Root-Verzeichnis. Stellen Sie sicher, dass die Funktion ein Versprechen zurückgibt, das zu einem Objekt mit Übersetzungen für die gegebene Sprache aufgelöst wird.

export default async function loadTranslations(locale) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
};

Wenn Sie einen anderen Namen oder Pfad verwenden möchten, übergeben Sie den relativen Pfad über den loadTranslationsPath Parameter in withGTConfig().

Beispiele

Übersetzungen aus Ihrem Bundle abrufen

export default async function loadTranslations(locale) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
};

Wenn konfiguriert, um lokale Übersetzungen zu verwenden, wird der Befehl gtx-cli translate Übersetzungen im Dateibaum Ihres Projekts speichern.

Sie können Übersetzungsdateien für Ihr Bundle mit diesem Befehl erstellen:

npx gtx-cli translate --no-publish --translations-dir ./public/locales

Übersetzungen von einem CDN laden

export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Übersetzungen aus Ihrer eigenen Datenbank laden

export default async function loadTranslations(locale) {
  try {
    const translations = await prisma.translation.findUnique({
      where: {
        locale: locale,
      },
    });
    return translations;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Notizen

• loadTranslations() gibt Ihnen die Möglichkeit, anzupassen, wie Übersetzungen in Ihrer App in der Produktion geladen werden.
• Der häufigste Anwendungsfall ist das Hinzufügen von lokalen Übersetzungen

Nächste Schritte

• Erfahren Sie, warum Sie möglicherweise lokale Übersetzungen verwenden möchten
• Fügen Sie Ihre eigenen Übersetzungen mit dem Leitfaden für benutzerdefinierte Übersetzungen hinzu