GitHub

Voraussetzungen: Next.js App Router, grundlegende JavaScript-Kenntnisse

Installation

Installieren Sie die Pakete gt-next und gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Schnelle Einrichtung: Verwenden Sie npx gtx-cli@latest für die automatische Konfiguration. Weitere Informationen finden Sie im Leitfaden zum Setup-Assistenten oder in unserer Integration von KI-Tools.

Konfiguration

`withGTConfig`

Die Funktion withGTConfig initialisiert das SDK in Ihrer Next.js‑Anwendung. Fügen Sie sie Ihrer Datei next.config.[js|ts] hinzu:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Ihre bestehende Next.js-Konfiguration
};

export default withGTConfig(nextConfig. {
  // Zusätzliche GT-Konfigurationsoptionen
});

`GTProvider`

Die Komponente GTProvider stellt clientseitigen Komponenten den Übersetzungskontext bereit. Sie verwaltet den Locale-Zustand, die Übersetzungen und aktiviert die Hooks useGT und useTranslations.

Fügen Sie GTProvider zu Ihrem Root-Layout bzw. Ihren Root-Layouts hinzu:

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Erstellen Sie im Projektstammverzeichnis die Datei gt.config.json:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Passen Sie die locales für Ihr Projekt an. Siehe unterstützte locales für options.

Umgebungsvariablen

Fügen Sie Folgendes zu Ihrer Datei .env.local hinzu, um Hot-Reloading während der Entwicklung zu ermöglichen:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Nur für die Entwicklung: Setzen Sie GT_API_KEY nicht in der Produktion – er wird ausschließlich fürs Hot-Reloading während der Entwicklung verwendet.

Holen Sie sich Ihre kostenlosen API-Schlüssel unter dash.generaltranslation.com oder führen Sie Folgendes aus:

npx gtx-cli auth

Verwendung

Jetzt können Sie mit der Internationalisierung Ihrer Inhalte beginnen. Es gibt zwei Hauptansätze:

JSX-Inhalte mit `<T>`

Umschließen Sie JSX-Elemente, um sie mit der Komponente <T> zu übersetzen:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Willkommen in unserer App!</h1>
    </T>
  );
}

Für dynamische Inhalte verwenden Sie Variable-Komponenten wie <Var>:

import { T, Var } from 'gt-next';

function Greeting({ user }) {
  return (
    <T>
      <p>Hallo, <Var>{user.name}</Var>!</p>
    </T>
  );
}

Siehe den Leitfaden zur Verwendung der <T>-Komponente für weitere Informationen.

Einfache Zeichenketten mit `useGT`

Für Attribute, Beschriftungen und einfachen Text mit dem useGT-Hook:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('E-Mail-Adresse eingeben')}
      aria-label={t('E-Mail-Eingabefeld')}
    />
  );
}

Für Server Components verwende getGT statt useGT.

Weitere Informationen findest du im Leitfaden zum Übersetzen von Strings.

Testen Ihrer App

Testen Sie Ihre Übersetzungen, indem Sie die Sprache wechseln:

Fügen Sie ein Dropdown zur Sprachauswahl hinzu mit <LocaleSelector>:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

Starten Sie Ihren Dev-Server:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Öffnen Sie localhost:3000 und wechseln Sie die Sprache über das Sprachauswahl-Dropdown.

In der Entwicklung werden Übersetzungen bei Bedarf geladen (es gibt eine kurze Ladezeit). In der Produktion ist alles vorab übersetzt.

Fehlerbehebung

Deployment

Für die Produktion musst du Inhalte vorab übersetzen, da Übersetzungen zur Laufzeit deaktiviert sind (ausgenommen die Funktionen <Tx> und tx).

Produktions-API-Schlüssel anfordern unter dash.generaltranslation.com.

Produktionsschlüssel beginnen mit gtx-api- (im Unterschied zu Dev-Schlüsseln, die mit gtx-dev- beginnen). Erfahre mehr über Umgebungsunterschiede.
In deiner CI/CD-Umgebung hinterlegen:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Niemals Produktionsschlüssel mit NEXT_PUBLIC_ prefixen – sie dürfen ausschließlich serverseitig verwendet werden.
Den translate-Befehl ausführen, um deine Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Das Verhalten des translate-Befehls kannst du über die Datei gt.config.json konfigurieren.

Weitere Informationen findest du in der Referenz zum CLI-Tool.

Dein Build-Skript anpassen, damit vor dem Build übersetzt wird:

package.json

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

Nächste Schritte

Leitfaden zur <T>-Komponente – Ausführliche Einführung in die <T>-Komponente und die Übersetzung mit JSX
Leitfaden zur String-Übersetzung – Verwendung von useGT und getGT
Variablen-Komponenten – Dynamische Inhalte mit <Var>, <Num> usw. verarbeiten

Voraussetzungen: Next.js App Router, grundlegende JavaScript-Kenntnisse

Installation

Installieren Sie die Pakete gt-next und gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Konfiguration

`withGTConfig`

Die Funktion withGTConfig initialisiert das SDK in Ihrer Next.js‑Anwendung. Fügen Sie sie Ihrer Datei next.config.[js|ts] hinzu:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Ihre bestehende Next.js-Konfiguration
};

export default withGTConfig(nextConfig. {
  // Zusätzliche GT-Konfigurationsoptionen
});

`GTProvider`

Fügen Sie GTProvider zu Ihrem Root-Layout bzw. Ihren Root-Layouts hinzu:

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Erstellen Sie im Projektstammverzeichnis die Datei gt.config.json:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Passen Sie die locales für Ihr Projekt an. Siehe unterstützte locales für options.

Umgebungsvariablen

Fügen Sie Folgendes zu Ihrer Datei .env.local hinzu, um Hot-Reloading während der Entwicklung zu ermöglichen:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Nur für die Entwicklung: Setzen Sie GT_API_KEY nicht in der Produktion – er wird ausschließlich fürs Hot-Reloading während der Entwicklung verwendet.

Holen Sie sich Ihre kostenlosen API-Schlüssel unter dash.generaltranslation.com oder führen Sie Folgendes aus:

npx gtx-cli auth

Verwendung

Jetzt können Sie mit der Internationalisierung Ihrer Inhalte beginnen. Es gibt zwei Hauptansätze:

JSX-Inhalte mit `<T>`

Umschließen Sie JSX-Elemente, um sie mit der Komponente <T> zu übersetzen:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Willkommen in unserer App!</h1>
    </T>
  );
}

Für dynamische Inhalte verwenden Sie Variable-Komponenten wie <Var>:

import { T, Var } from 'gt-next';

function Greeting({ user }) {
  return (
    <T>
      <p>Hallo, <Var>{user.name}</Var>!</p>
    </T>
  );
}

Siehe den Leitfaden zur Verwendung der <T>-Komponente für weitere Informationen.

Einfache Zeichenketten mit `useGT`

Für Attribute, Beschriftungen und einfachen Text mit dem useGT-Hook:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('E-Mail-Adresse eingeben')}
      aria-label={t('E-Mail-Eingabefeld')}
    />
  );
}

Für Server Components verwende getGT statt useGT.

Weitere Informationen findest du im Leitfaden zum Übersetzen von Strings.

Testen Ihrer App

Testen Sie Ihre Übersetzungen, indem Sie die Sprache wechseln:

Fügen Sie ein Dropdown zur Sprachauswahl hinzu mit <LocaleSelector>:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

Starten Sie Ihren Dev-Server:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Öffnen Sie localhost:3000 und wechseln Sie die Sprache über das Sprachauswahl-Dropdown.

In der Entwicklung werden Übersetzungen bei Bedarf geladen (es gibt eine kurze Ladezeit). In der Produktion ist alles vorab übersetzt.

Fehlerbehebung

Deployment

Für die Produktion musst du Inhalte vorab übersetzen, da Übersetzungen zur Laufzeit deaktiviert sind (ausgenommen die Funktionen <Tx> und tx).

Produktions-API-Schlüssel anfordern unter dash.generaltranslation.com.

Produktionsschlüssel beginnen mit gtx-api- (im Unterschied zu Dev-Schlüsseln, die mit gtx-dev- beginnen). Erfahre mehr über Umgebungsunterschiede.
In deiner CI/CD-Umgebung hinterlegen:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Niemals Produktionsschlüssel mit NEXT_PUBLIC_ prefixen – sie dürfen ausschließlich serverseitig verwendet werden.
Den translate-Befehl ausführen, um deine Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Das Verhalten des translate-Befehls kannst du über die Datei gt.config.json konfigurieren.

Weitere Informationen findest du in der Referenz zum CLI-Tool.

Dein Build-Skript anpassen, damit vor dem Build übersetzt wird:

package.json

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

Nächste Schritte

Leitfaden zur <T>-Komponente – Ausführliche Einführung in die <T>-Komponente und die Übersetzung mit JSX
Leitfaden zur String-Übersetzung – Verwendung von useGT und getGT
Variablen-Komponenten – Dynamische Inhalte mit <Var>, <Num> usw. verarbeiten

Voraussetzungen: Next.js App Router, grundlegende JavaScript-Kenntnisse

Installation

Installieren Sie die Pakete gt-next und gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Konfiguration

`withGTConfig`

Die Funktion withGTConfig initialisiert das SDK in Ihrer Next.js‑Anwendung. Fügen Sie sie Ihrer Datei next.config.[js|ts] hinzu:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Ihre bestehende Next.js-Konfiguration
};

export default withGTConfig(nextConfig. {
  // Zusätzliche GT-Konfigurationsoptionen
});

`GTProvider`

Fügen Sie GTProvider zu Ihrem Root-Layout bzw. Ihren Root-Layouts hinzu:

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Erstellen Sie im Projektstammverzeichnis die Datei gt.config.json:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Passen Sie die locales für Ihr Projekt an. Siehe unterstützte locales für options.

Umgebungsvariablen

Fügen Sie Folgendes zu Ihrer Datei .env.local hinzu, um Hot-Reloading während der Entwicklung zu ermöglichen:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Nur für die Entwicklung: Setzen Sie GT_API_KEY nicht in der Produktion – er wird ausschließlich fürs Hot-Reloading während der Entwicklung verwendet.

Holen Sie sich Ihre kostenlosen API-Schlüssel unter dash.generaltranslation.com oder führen Sie Folgendes aus:

npx gtx-cli auth

Verwendung

Jetzt können Sie mit der Internationalisierung Ihrer Inhalte beginnen. Es gibt zwei Hauptansätze:

JSX-Inhalte mit `<T>`

Umschließen Sie JSX-Elemente, um sie mit der Komponente <T> zu übersetzen:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Willkommen in unserer App!</h1>
    </T>
  );
}

Für dynamische Inhalte verwenden Sie Variable-Komponenten wie <Var>:

import { T, Var } from 'gt-next';

function Greeting({ user }) {
  return (
    <T>
      <p>Hallo, <Var>{user.name}</Var>!</p>
    </T>
  );
}

Siehe den Leitfaden zur Verwendung der <T>-Komponente für weitere Informationen.

Einfache Zeichenketten mit `useGT`

Für Attribute, Beschriftungen und einfachen Text mit dem useGT-Hook:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('E-Mail-Adresse eingeben')}
      aria-label={t('E-Mail-Eingabefeld')}
    />
  );
}

Für Server Components verwende getGT statt useGT.

Weitere Informationen findest du im Leitfaden zum Übersetzen von Strings.

Testen Ihrer App

Testen Sie Ihre Übersetzungen, indem Sie die Sprache wechseln:

Fügen Sie ein Dropdown zur Sprachauswahl hinzu mit <LocaleSelector>:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

Starten Sie Ihren Dev-Server:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Öffnen Sie localhost:3000 und wechseln Sie die Sprache über das Sprachauswahl-Dropdown.

In der Entwicklung werden Übersetzungen bei Bedarf geladen (es gibt eine kurze Ladezeit). In der Produktion ist alles vorab übersetzt.

Fehlerbehebung

Deployment

Für die Produktion musst du Inhalte vorab übersetzen, da Übersetzungen zur Laufzeit deaktiviert sind (ausgenommen die Funktionen <Tx> und tx).

Produktions-API-Schlüssel anfordern unter dash.generaltranslation.com.

Produktionsschlüssel beginnen mit gtx-api- (im Unterschied zu Dev-Schlüsseln, die mit gtx-dev- beginnen). Erfahre mehr über Umgebungsunterschiede.
In deiner CI/CD-Umgebung hinterlegen:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Niemals Produktionsschlüssel mit NEXT_PUBLIC_ prefixen – sie dürfen ausschließlich serverseitig verwendet werden.
Den translate-Befehl ausführen, um deine Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Das Verhalten des translate-Befehls kannst du über die Datei gt.config.json konfigurieren.

Weitere Informationen findest du in der Referenz zum CLI-Tool.

Dein Build-Skript anpassen, damit vor dem Build übersetzt wird:

package.json

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

Nächste Schritte

Leitfaden zur <T>-Komponente – Ausführliche Einführung in die <T>-Komponente und die Übersetzung mit JSX
Leitfaden zur String-Übersetzung – Verwendung von useGT und getGT
Variablen-Komponenten – Dynamische Inhalte mit <Var>, <Num> usw. verarbeiten

Next.js Schnellstart

Was, wenn ich die General Translation Plattform nicht nutzen möchte?

Die Sprache meiner App ändert sich nicht, obwohl ich die Sprache meines Browsers geändert habe.

Warum dauert das Laden von Sprachen in der Entwicklung so lange?

Warum sind einige Übersetzungen ungenau?

What if I'm not using the General Translation platform?

Auf dieser Seite

Next.js Schnellstart

Was, wenn ich die General Translation Plattform nicht nutzen möchte?

Die Sprache meiner App ändert sich nicht, obwohl ich die Sprache meines Browsers geändert habe.

Warum dauert das Laden von Sprachen in der Entwicklung so lange?

Warum sind einige Übersetzungen ungenau?

What if I'm not using the General Translation platform?

Auf dieser Seite

Next.js Schnellstart

Was, wenn ich die General Translation Plattform nicht nutzen möchte?

Die Sprache meiner App ändert sich nicht, obwohl ich die Sprache meines Browsers geändert habe.

Warum dauert das Laden von Sprachen in der Entwicklung so lange?

Warum sind einige Übersetzungen ungenau?

What if I'm not using the General Translation platform?

Auf dieser Seite

GitHubStern auf GitHub vergeben

GitHubStern auf GitHub vergeben

Stern auf GitHub vergeben

Stern auf GitHub vergeben