Lokale Übersetzungen

Überblick

Diese Anleitung zeigt Ihnen, wie Sie Übersetzungen in Ihrer Next.js-App speichern können, anstatt ein CDN zu verwenden. Das bedeutet, dass Übersetzungen im Bundle Ihrer App enthalten sind. Dies kann zu schnelleren Ladezeiten führen und vermeidet die Abhängigkeit von externer Infrastruktur.

In diesem Dokument werden wir (1) erklären, was lokale Übersetzungen sind und wie sie funktionieren und (2) Ihnen zeigen, wie Sie lokale Übersetzungen für Ihre Next.js-App einrichten.

Was sind lokale Übersetzungen?

Lokale Übersetzungen werden im Bundle Ihrer App gespeichert, im Gegensatz zu Übersetzungen, die von einem CDN (Content Distribution Network) abgerufen werden.

Angenommen, Sie haben den Befehl gtx-cli translate zu Ihrem CD-Prozess hinzugefügt. Dadurch werden JSON-Dateien mit Übersetzungen für Ihre App generiert. Der letzte Schritt besteht darin, diese Übersetzungen aus unserer API in Ihre App zu übertragen.

Es gibt zwei Möglichkeiten, dies zu tun:

• Im Bundle Ihrer App: Nachdem Übersetzungen generiert wurden, fügen Sie sie zum Bundle Ihrer App hinzu.
• In einem CDN (Standard): Abrufen von Übersetzungen aus einem CDN zur Laufzeit.

Was sind die Vorteile?

Schnellere Ladezeiten: Lokale Übersetzungen werden direkt von Ihrer App bereitgestellt, was bedeutet, dass sie schneller geladen werden als Übersetzungen, die von einem CDN bereitgestellt werden.

Keine Abhängigkeit von externen Diensten: Die Fähigkeit Ihrer App, Übersetzungen zu laden, ist nicht von der Verfügbarkeit eines CDN abhängig.

Was sind die Nachteile?

Erhöhte Bundle-Größe: Lokale Übersetzungen vergrößern das Bundle Ihrer App, da sie zusammen mit Ihrer App bereitgestellt werden. Das bedeutet, dass Ihre App beim ersten Laden etwas länger dauern kann.

Verwaltung von Sprachen: Um Unterstützung für Sprachen hinzuzufügen oder zu entfernen, müssen Sie Ihre App jedes Mal neu bereitstellen.

Content-Management: Ähnlich wie bei der Sprachverwaltung müssen Sie, wenn Sie eine Übersetzung ändern möchten (z.B. wenn Ihnen die Formulierung Ihres Inhalts in einer anderen Sprache nicht gefällt), Ihre App mit der neuen Übersetzung neu bereitstellen.

Einrichtung

Voraussetzungen

Stellen Sie sicher, dass Sie der Schnellstartanleitung gefolgt sind.

Schritte

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

npx gtx-cli init

npx gtx-cli translate

Das war's! Ihre App wird jetzt nur Übersetzungen aus Ihren lokalen Dateien laden.

Hinweise

• Lokale Übersetzungen sind eine Alternative zum Abrufen von Übersetzungen von einem CDN.
• Sie können loadTranslations() anpassen, um auch Übersetzungen aus anderen Quellen zu laden, wie Ihrer Datenbank oder Ihrem eigenen CDN.

Nächste Schritte

• Siehe loadTranslations() für weitere Informationen zum Schreiben eines benutzerdefinierten Übersetzungsloaders.
• Wenn Sie Ihre eigenen Übersetzungen schreiben möchten, schauen Sie sich benutzerdefinierte Übersetzungen an.
• Weitere Informationen zur Wörterbuchsyntax finden Sie in der Wörterbuchreferenz.