GitHub

Wörterbücher sind ein klassischer Ansatz, Übersetzungen in verschachtelten Objekten mit Schlüssel-Wert-Paaren zu organisieren. Auch wenn <T>-Komponenten der empfohlene Weg sind, können Wörterbücher bei der Migration von anderen i18n-Bibliotheken oder wenn Sie eine zentralisierte Übersetzungsspeicherung bevorzugen, hilfreich sein.

Empfehlung: Verwenden Sie für neue Projekte <T>-Komponenten. Wörterbücher werden in erster Linie zur Migration und für die Kompatibilität mit bestehenden Übersetzungs-Workflows unterstützt.

Wörterbuch vs. Komponenten-Übersetzung

Wörterbuchmuster

// dictionary.ts
export default {
  greetings: {
    hello: 'Hallo, Welt!',
    welcome: 'Willkommen, {name}!'
  }
};

// Component usage
function MyComponent() {
  const d = useTranslations();
  return <div>{d('greetings.hello')}</div>;
}

Komponentenpattern

// Direkte Komponentenverwendung - empfohlen
function MyComponent() {
  return <T><div>Hallo, Welt!</div></T>;
}

Kompromisse

Vorteile des Wörterbuchs

Zentrale Ablage - Alle Übersetzungen an einem Ort
Branchenstandard - Vertrautes Muster aus anderen i18n-Bibliotheken
Migrationsfreundlich - Bestehende Übersetzungen lassen sich leicht übernehmen

Nachteile des Wörterbuchs

Komplexität - Mehr Einrichtung und Konfiguration nötig
Wartbarkeit - Vom Einsatz getrennte Inhalte erschweren Aktualisierungen
Debuggability - Übersetzungen lassen sich schwerer den Komponenten zuordnen
Lesbarkeit - Schlüssel geben den tatsächlichen Inhalt nicht wieder

Kurzstart

Schritt 1: Wörterbuch erstellen

Erstellen Sie in Ihrem Projektstamm oder im Verzeichnis src eine Datei für das Wörterbuch:

dictionary.ts

const dictionary = {
  greetings: {
    hello: 'Hallo, Welt!',
    welcome: 'Willkommen in unserer App!'
  },
  navigation: {
    home: 'Startseite',
    about: 'Über uns',
    contact: 'Kontakt'
  }
};

export default dictionary;

Oder im JSON-Format:

dictionary.json

{
  "greetings": {
    "hello": "Hallo, Welt!",
    "welcome": "Willkommen in unserer App!"
  },
  "navigation": {
    "home": "Startseite", 
    "about": "Über uns",
    "contact": "Kontakt"
  }
}

Die Funktion withGTConfig erkennt die Wörterbuchdatei in Ihrem Projektstammverzeichnis oder im src-Verzeichnis automatisch.

Schritt 2: Verwendung in Komponenten

Der Hook useTranslations ermöglicht den Zugriff auf Wörterbucheinträge:

Client Components

import { useTranslations } from 'gt-next';

function MyComponent() {
  const d = useTranslations();
  
  return (
    <div>
      <h1>{d('greetings.hello')}</h1>
      <p>{d('greetings.welcome')}</p>
    </div>
  );
}

Server Components

import { getTranslations } from 'gt-next/server';

async function MyServerComponent() {
  const d = await getTranslations();
  
  return (
    <div>
      <h1>{d('greetings.hello')}</h1>
      <p>{d('greetings.welcome')}</p>
    </div>
  );
}

Verwendung von Variablen

Fügen Sie Variablen mithilfe der {variable}-Syntax zu Wörterbucheinträgen hinzu:

dictionary.ts

const dictionary = {
  user: {
    greeting: 'Hallo, {name}!',
    itemCount: 'Sie haben {count} Artikel',
    orderTotal: 'Gesamt: ${amount}'
  }
};

function UserDashboard() {
  const d = useTranslations();
  
  return (
    <div>
      <h1>{d('user.greeting', { name: 'Alice' })}</h1>
      <p>{d('user.itemCount', { count: 5 })}</p>
      <p>{d('user.orderTotal', { amount: 99.99 })}</p>
    </div>
  );
}

Verwendung von Präfixen

Begrenzen Sie den Zugriff auf das Wörterbuch mithilfe von Präfixen auf bestimmte Abschnitte:

dictionary.ts

const dictionary = {
  dashboard: {
    header: {
      welcome: 'Willkommen zurück!',
      lastLogin: 'Letzter Login: {date}'
    },
    stats: {
      totalUsers: 'Benutzer gesamt: {count}',
      activeUsers: 'Aktive Benutzer: {count}'
    }
  }
};

function DashboardHeader() {
  // Präfix beschränkt den Zugriff auf „dashboard.header"
  const d = useTranslations('dashboard.header');
  
  return (
    <header>
      <h1>{d('welcome')}</h1> {/* -> dashboard.header.welcome */}
      <p>{d('lastLogin', { date: 'Today' })}</p> {/* -> dashboard.header.lastLogin */}
    </header>
  );
}

function DashboardStats() {
  // Anderes Präfix für den Statistikbereich
  const d = useTranslations('dashboard.stats');
  
  return (
    <div>
      <p>{d('totalUsers', { count: 1000 })}</p> {/* -> dashboard.stats.totalUsers */}
      <p>{d('activeUsers', { count: 150 })}</p> {/* -> dashboard.stats.activeUsers */}
    </div>
  );
}

Mehrsprachige Unterstützung

Automatische Übersetzung (empfohlen)

Die meisten Nutzer sollten loadTranslations verwenden, um Übersetzungen automatisch aus Ihrem Basis-Wörterbuch zu generieren:

dictionary.ts

const dictionary = {
  common: {
    save: 'Speichern',
    cancel: 'Abbrechen',
    delete: 'Löschen'
  },
  forms: {
    required: 'Dieses Feld ist erforderlich',
    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein'
  }
};

export default dictionary;

Erstellen Sie eine Funktion loadTranslations, um die generierten Übersetzungsdateien zu laden:

src/loadTranslations.ts

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

withGTConfig erkennt automatisch die Datei loadTranslations.[js|ts] in Ihrem src/-Verzeichnis oder im Projektstamm.

GT generiert automatisch Übersetzungen für andere Sprachen auf Basis Ihres Basis-Wörterbuchs. Führen Sie npx gtx-cli translate aus, um Übersetzungen für alle konfigurierten Sprachen zu generieren.

Manuelle Übersetzungsdateien (Migration)

Für die Migration von anderen i18n‑Bibliotheken oder die manuelle Verwaltung von Übersetzungen verwenden Sie loadDictionary:

src/loadDictionary.ts

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

Dies lädt JSON-Übersetzungsdateien aus deinem Verzeichnis public/locales/:

es.json

fr.json

de.json

Den richtigen Ansatz wählen: Verwende loadTranslations für neue Projekte mit automatischer Generierung von Übersetzungen oder loadDictionary, wenn du bestehende Übersetzungsdateien migrierst.

Produktionssetup

Buildprozess

Fügen Sie den Übersetzungsschritt zu Ihrer Build-Pipeline hinzu:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...IHR_BUILD_BEFEHL...>"
  }
}

Verhalten in Development vs. Production

Development: Wörterbucheinträge werden bei Bedarf mit dem Dev-API-Schlüssel übersetzt
Production: Alle Wörterbuchübersetzungen werden im Build-Schritt vorab erzeugt

Kombination mit Komponenten

Dictionaries und <T>-Komponenten lassen sich kombinieren:

function MixedApproach() {
  const d = useTranslations();
  
  return (
    <div>
      {/* Wörterbuch für einfache Zeichenketten */}
      <h1>{d('page.title')}</h1>
      
      {/* T-Komponente für komplexes JSX */}
      <T>
        <p>Dies ist eine <strong>komplexe Nachricht</strong> mit <a href="/link">Links</a>.</p>
      </T>
      
      {/* Wörterbuch für Formularfelder */}
      <label>{d('forms.email')}</label>
    </div>
  );
}

Nächste Schritte

Leitfaden zu Sprachen - Unterstützte Sprachen und Locale-Einstellungen konfigurieren
Leitfaden zu dynamischen Inhalten - Übersetzungen zur Laufzeit verarbeiten
API Reference:
- useTranslations Hook
- getTranslations Function

Wörterbuch vs. Komponenten-Übersetzung

Wörterbuchmuster

// dictionary.ts
export default {
  greetings: {
    hello: 'Hallo, Welt!',
    welcome: 'Willkommen, {name}!'
  }
};

// Component usage
function MyComponent() {
  const d = useTranslations();
  return <div>{d('greetings.hello')}</div>;
}

Komponentenpattern

// Direkte Komponentenverwendung - empfohlen
function MyComponent() {
  return <T><div>Hallo, Welt!</div></T>;
}

Kompromisse

Vorteile des Wörterbuchs

Zentrale Ablage - Alle Übersetzungen an einem Ort
Branchenstandard - Vertrautes Muster aus anderen i18n-Bibliotheken
Migrationsfreundlich - Bestehende Übersetzungen lassen sich leicht übernehmen

Nachteile des Wörterbuchs

Komplexität - Mehr Einrichtung und Konfiguration nötig
Wartbarkeit - Vom Einsatz getrennte Inhalte erschweren Aktualisierungen
Debuggability - Übersetzungen lassen sich schwerer den Komponenten zuordnen
Lesbarkeit - Schlüssel geben den tatsächlichen Inhalt nicht wieder

Kurzstart

Schritt 1: Wörterbuch erstellen

Erstellen Sie in Ihrem Projektstamm oder im Verzeichnis src eine Datei für das Wörterbuch:

dictionary.ts

const dictionary = {
  greetings: {
    hello: 'Hallo, Welt!',
    welcome: 'Willkommen in unserer App!'
  },
  navigation: {
    home: 'Startseite',
    about: 'Über uns',
    contact: 'Kontakt'
  }
};

export default dictionary;

Oder im JSON-Format:

dictionary.json

{
  "greetings": {
    "hello": "Hallo, Welt!",
    "welcome": "Willkommen in unserer App!"
  },
  "navigation": {
    "home": "Startseite", 
    "about": "Über uns",
    "contact": "Kontakt"
  }
}

Die Funktion withGTConfig erkennt die Wörterbuchdatei in Ihrem Projektstammverzeichnis oder im src-Verzeichnis automatisch.

Schritt 2: Verwendung in Komponenten

Der Hook useTranslations ermöglicht den Zugriff auf Wörterbucheinträge:

Client Components

import { useTranslations } from 'gt-next';

function MyComponent() {
  const d = useTranslations();
  
  return (
    <div>
      <h1>{d('greetings.hello')}</h1>
      <p>{d('greetings.welcome')}</p>
    </div>
  );
}

Server Components

import { getTranslations } from 'gt-next/server';

async function MyServerComponent() {
  const d = await getTranslations();
  
  return (
    <div>
      <h1>{d('greetings.hello')}</h1>
      <p>{d('greetings.welcome')}</p>
    </div>
  );
}

Verwendung von Variablen

Fügen Sie Variablen mithilfe der {variable}-Syntax zu Wörterbucheinträgen hinzu:

dictionary.ts

const dictionary = {
  user: {
    greeting: 'Hallo, {name}!',
    itemCount: 'Sie haben {count} Artikel',
    orderTotal: 'Gesamt: ${amount}'
  }
};

function UserDashboard() {
  const d = useTranslations();
  
  return (
    <div>
      <h1>{d('user.greeting', { name: 'Alice' })}</h1>
      <p>{d('user.itemCount', { count: 5 })}</p>
      <p>{d('user.orderTotal', { amount: 99.99 })}</p>
    </div>
  );
}

Verwendung von Präfixen

Begrenzen Sie den Zugriff auf das Wörterbuch mithilfe von Präfixen auf bestimmte Abschnitte:

dictionary.ts

const dictionary = {
  dashboard: {
    header: {
      welcome: 'Willkommen zurück!',
      lastLogin: 'Letzter Login: {date}'
    },
    stats: {
      totalUsers: 'Benutzer gesamt: {count}',
      activeUsers: 'Aktive Benutzer: {count}'
    }
  }
};

function DashboardHeader() {
  // Präfix beschränkt den Zugriff auf „dashboard.header"
  const d = useTranslations('dashboard.header');
  
  return (
    <header>
      <h1>{d('welcome')}</h1> {/* -> dashboard.header.welcome */}
      <p>{d('lastLogin', { date: 'Today' })}</p> {/* -> dashboard.header.lastLogin */}
    </header>
  );
}

function DashboardStats() {
  // Anderes Präfix für den Statistikbereich
  const d = useTranslations('dashboard.stats');
  
  return (
    <div>
      <p>{d('totalUsers', { count: 1000 })}</p> {/* -> dashboard.stats.totalUsers */}
      <p>{d('activeUsers', { count: 150 })}</p> {/* -> dashboard.stats.activeUsers */}
    </div>
  );
}

Mehrsprachige Unterstützung

Automatische Übersetzung (empfohlen)

Die meisten Nutzer sollten loadTranslations verwenden, um Übersetzungen automatisch aus Ihrem Basis-Wörterbuch zu generieren:

dictionary.ts

const dictionary = {
  common: {
    save: 'Speichern',
    cancel: 'Abbrechen',
    delete: 'Löschen'
  },
  forms: {
    required: 'Dieses Feld ist erforderlich',
    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein'
  }
};

export default dictionary;

Erstellen Sie eine Funktion loadTranslations, um die generierten Übersetzungsdateien zu laden:

src/loadTranslations.ts

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

withGTConfig erkennt automatisch die Datei loadTranslations.[js|ts] in Ihrem src/-Verzeichnis oder im Projektstamm.

Manuelle Übersetzungsdateien (Migration)

Für die Migration von anderen i18n‑Bibliotheken oder die manuelle Verwaltung von Übersetzungen verwenden Sie loadDictionary:

src/loadDictionary.ts

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

Dies lädt JSON-Übersetzungsdateien aus deinem Verzeichnis public/locales/:

es.json

fr.json

de.json

Produktionssetup

Buildprozess

Fügen Sie den Übersetzungsschritt zu Ihrer Build-Pipeline hinzu:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...IHR_BUILD_BEFEHL...>"
  }
}

Verhalten in Development vs. Production

Development: Wörterbucheinträge werden bei Bedarf mit dem Dev-API-Schlüssel übersetzt
Production: Alle Wörterbuchübersetzungen werden im Build-Schritt vorab erzeugt

Kombination mit Komponenten

Dictionaries und <T>-Komponenten lassen sich kombinieren:

function MixedApproach() {
  const d = useTranslations();
  
  return (
    <div>
      {/* Wörterbuch für einfache Zeichenketten */}
      <h1>{d('page.title')}</h1>
      
      {/* T-Komponente für komplexes JSX */}
      <T>
        <p>Dies ist eine <strong>komplexe Nachricht</strong> mit <a href="/link">Links</a>.</p>
      </T>
      
      {/* Wörterbuch für Formularfelder */}
      <label>{d('forms.email')}</label>
    </div>
  );
}

Nächste Schritte

Leitfaden zu Sprachen - Unterstützte Sprachen und Locale-Einstellungen konfigurieren
Leitfaden zu dynamischen Inhalten - Übersetzungen zur Laufzeit verarbeiten
API Reference:
- useTranslations Hook
- getTranslations Function

Wörterbuch vs. Komponenten-Übersetzung

Wörterbuchmuster

// dictionary.ts
export default {
  greetings: {
    hello: 'Hallo, Welt!',
    welcome: 'Willkommen, {name}!'
  }
};

// Component usage
function MyComponent() {
  const d = useTranslations();
  return <div>{d('greetings.hello')}</div>;
}

Komponentenpattern

// Direkte Komponentenverwendung - empfohlen
function MyComponent() {
  return <T><div>Hallo, Welt!</div></T>;
}

Kompromisse

Vorteile des Wörterbuchs

Zentrale Ablage - Alle Übersetzungen an einem Ort
Branchenstandard - Vertrautes Muster aus anderen i18n-Bibliotheken
Migrationsfreundlich - Bestehende Übersetzungen lassen sich leicht übernehmen

Nachteile des Wörterbuchs

Komplexität - Mehr Einrichtung und Konfiguration nötig
Wartbarkeit - Vom Einsatz getrennte Inhalte erschweren Aktualisierungen
Debuggability - Übersetzungen lassen sich schwerer den Komponenten zuordnen
Lesbarkeit - Schlüssel geben den tatsächlichen Inhalt nicht wieder

Kurzstart

Schritt 1: Wörterbuch erstellen

Erstellen Sie in Ihrem Projektstamm oder im Verzeichnis src eine Datei für das Wörterbuch:

dictionary.ts

const dictionary = {
  greetings: {
    hello: 'Hallo, Welt!',
    welcome: 'Willkommen in unserer App!'
  },
  navigation: {
    home: 'Startseite',
    about: 'Über uns',
    contact: 'Kontakt'
  }
};

export default dictionary;

Oder im JSON-Format:

dictionary.json

{
  "greetings": {
    "hello": "Hallo, Welt!",
    "welcome": "Willkommen in unserer App!"
  },
  "navigation": {
    "home": "Startseite", 
    "about": "Über uns",
    "contact": "Kontakt"
  }
}

Die Funktion withGTConfig erkennt die Wörterbuchdatei in Ihrem Projektstammverzeichnis oder im src-Verzeichnis automatisch.

Schritt 2: Verwendung in Komponenten

Der Hook useTranslations ermöglicht den Zugriff auf Wörterbucheinträge:

Client Components

import { useTranslations } from 'gt-next';

function MyComponent() {
  const d = useTranslations();
  
  return (
    <div>
      <h1>{d('greetings.hello')}</h1>
      <p>{d('greetings.welcome')}</p>
    </div>
  );
}

Server Components

import { getTranslations } from 'gt-next/server';

async function MyServerComponent() {
  const d = await getTranslations();
  
  return (
    <div>
      <h1>{d('greetings.hello')}</h1>
      <p>{d('greetings.welcome')}</p>
    </div>
  );
}

Verwendung von Variablen

Fügen Sie Variablen mithilfe der {variable}-Syntax zu Wörterbucheinträgen hinzu:

dictionary.ts

const dictionary = {
  user: {
    greeting: 'Hallo, {name}!',
    itemCount: 'Sie haben {count} Artikel',
    orderTotal: 'Gesamt: ${amount}'
  }
};

function UserDashboard() {
  const d = useTranslations();
  
  return (
    <div>
      <h1>{d('user.greeting', { name: 'Alice' })}</h1>
      <p>{d('user.itemCount', { count: 5 })}</p>
      <p>{d('user.orderTotal', { amount: 99.99 })}</p>
    </div>
  );
}

Verwendung von Präfixen

Begrenzen Sie den Zugriff auf das Wörterbuch mithilfe von Präfixen auf bestimmte Abschnitte:

dictionary.ts

const dictionary = {
  dashboard: {
    header: {
      welcome: 'Willkommen zurück!',
      lastLogin: 'Letzter Login: {date}'
    },
    stats: {
      totalUsers: 'Benutzer gesamt: {count}',
      activeUsers: 'Aktive Benutzer: {count}'
    }
  }
};

function DashboardHeader() {
  // Präfix beschränkt den Zugriff auf „dashboard.header"
  const d = useTranslations('dashboard.header');
  
  return (
    <header>
      <h1>{d('welcome')}</h1> {/* -> dashboard.header.welcome */}
      <p>{d('lastLogin', { date: 'Today' })}</p> {/* -> dashboard.header.lastLogin */}
    </header>
  );
}

function DashboardStats() {
  // Anderes Präfix für den Statistikbereich
  const d = useTranslations('dashboard.stats');
  
  return (
    <div>
      <p>{d('totalUsers', { count: 1000 })}</p> {/* -> dashboard.stats.totalUsers */}
      <p>{d('activeUsers', { count: 150 })}</p> {/* -> dashboard.stats.activeUsers */}
    </div>
  );
}

Mehrsprachige Unterstützung

Automatische Übersetzung (empfohlen)

Die meisten Nutzer sollten loadTranslations verwenden, um Übersetzungen automatisch aus Ihrem Basis-Wörterbuch zu generieren:

dictionary.ts

const dictionary = {
  common: {
    save: 'Speichern',
    cancel: 'Abbrechen',
    delete: 'Löschen'
  },
  forms: {
    required: 'Dieses Feld ist erforderlich',
    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein'
  }
};

export default dictionary;

Erstellen Sie eine Funktion loadTranslations, um die generierten Übersetzungsdateien zu laden:

src/loadTranslations.ts

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

withGTConfig erkennt automatisch die Datei loadTranslations.[js|ts] in Ihrem src/-Verzeichnis oder im Projektstamm.

Manuelle Übersetzungsdateien (Migration)

Für die Migration von anderen i18n‑Bibliotheken oder die manuelle Verwaltung von Übersetzungen verwenden Sie loadDictionary:

src/loadDictionary.ts

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

Dies lädt JSON-Übersetzungsdateien aus deinem Verzeichnis public/locales/:

es.json

fr.json

de.json

Produktionssetup

Buildprozess

Fügen Sie den Übersetzungsschritt zu Ihrer Build-Pipeline hinzu:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...IHR_BUILD_BEFEHL...>"
  }
}

Verhalten in Development vs. Production

Development: Wörterbucheinträge werden bei Bedarf mit dem Dev-API-Schlüssel übersetzt
Production: Alle Wörterbuchübersetzungen werden im Build-Schritt vorab erzeugt

Kombination mit Komponenten

Dictionaries und <T>-Komponenten lassen sich kombinieren:

function MixedApproach() {
  const d = useTranslations();
  
  return (
    <div>
      {/* Wörterbuch für einfache Zeichenketten */}
      <h1>{d('page.title')}</h1>
      
      {/* T-Komponente für komplexes JSX */}
      <T>
        <p>Dies ist eine <strong>komplexe Nachricht</strong> mit <a href="/link">Links</a>.</p>
      </T>
      
      {/* Wörterbuch für Formularfelder */}
      <label>{d('forms.email')}</label>
    </div>
  );
}

Nächste Schritte

Leitfaden zu Sprachen - Unterstützte Sprachen und Locale-Einstellungen konfigurieren
Leitfaden zu dynamischen Inhalten - Übersetzungen zur Laufzeit verarbeiten
API Reference:
- useTranslations Hook
- getTranslations Function

Wörterbücher

Auf dieser Seite

Wörterbücher

Auf dieser Seite

Wörterbücher

Auf dieser Seite

GitHubStern auf GitHub vergeben

GitHubStern auf GitHub vergeben

Stern auf GitHub vergeben

Stern auf GitHub vergeben