Übersicht

Mit gt-next 6.6.0 schlagen wir einen neuen Weg zur Internationalisierung von „Brownfield“-Apps ein. Wir führen die Funktion t.obj() ein, die übersetzte Wörterbuchstrukturen zurückgeben kann.

Motivation

„Brownfield“ und „Greenfield“ sind Begriffe, die aus der Immobilienentwicklung stammen. Ein Greenfield ist ein Grundstück ohne bestehende Bebauung, während ein Brownfield bereits bestehende Strukturen aufweist. In i18n übertragen bedeutet das: Apps ohne bestehende i18n-Infrastruktur (Greenfield) im Vergleich zu Apps, die bereits eine i18n-Infrastruktur haben (Brownfield).

Unsere Bibliothek war bislang stark darauf ausgerichtet, Greenfield-Apps zu internationalisieren. Siehe zum Beispiel die <T>-Komponente oder den useGT()-Hook.

Die einzige Infrastruktur, die wir bisher speziell für Brownfield-Apps aufgebaut haben, sind die Hooks const t = useTranslations() und const t = getTranslations(), die an das Dictionary-Pattern von next-intl angelehnt sind. Unsere t()-Funktion war jedoch eingeschränkt und hat nur Strings zurückgegeben, keine Dictionary-Teilbäume.

Wir haben festgestellt, dass Entwickler oft erwarten, dass ihre i18n-Bibliothek Dictionary-Teilbäume und nicht nur Strings zurückgibt. Daher ist es entscheidend, dass gt-next diese Funktion unterstützt, wenn Entwickler von anderen i18n-Bibliotheken migrieren.

Verwendung

Betrachten Sie die folgende Dictionary-Struktur, in der Sie eine Liste von Einträgen haben, über die Sie iterieren möchten:

{
  "cards": [
    {
      "title": "Karte 1",
      "description": "Beschreibung Karte 1"
    },
    {
      "title": "Karte 2",
      "description": "Beschreibung Karte 2"
    },
    {
      "title": "Karte 3",
      "description": "Beschreibung Karte 3"
    }
  ]
}

Mit unserem bisherigen Ansatz müssten Sie auf jedes Element einzeln über seinen genauen Schlüssel zugreifen:

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t('cards.0.title')}
        {t('cards.0.description')}
      </div>
      <div>
        {t('cards.1.title')}
        {t('cards.1.description')}
      </div>
      <div>
        {t('cards.2.title')}
        {t('cards.2.description')}
      </div>
    </>
  )
}

Dieser Ansatz ist eindeutig weder skalierbar noch wartbar.

Die neue Funktion t.obj() bietet eine leistungsstarke Möglichkeit, auf Dictionary-Strukturen als Teilbäume zuzugreifen:

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t.obj('cards').map((card) => (
          <div key={card.title}>
            {card.title}
            {card.description}
          </div>
        ))}
      </div>
    </>
  )
}

Fazit

Die Funktion t.obj() ist ein wichtiger Schritt, um gt-next sowohl für Greenfield- als auch Brownfield-Anwendungen noch vielseitiger zu machen. Indem Entwickler direkt mit Teilbäumen des Wörterbuchs arbeiten können, beseitigen wir einen zentralen Reibungspunkt bei der Internationalisierung bestehender Anwendungen.

Diese Erweiterung bringt gt-next näher an die Developer Experience heran, die Teams von modernen i18n-Bibliotheken erwarten, und erleichtert das Iterieren über übersetzte Inhalte sowie den Aufbau dynamischer, gut wartbarer, internationalisierter Anwendungen.