GitHub

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

Installation

Installiere 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: Verwende npx gtx-cli@latest für die automatische Konfiguration. Siehe die Anleitung zum Setup-Assistenten oder nutze unsere 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 einen Übersetzungskontext bereit. Sie verwaltet die Locale, Übersetzungen und aktiviert die Hooks useGT und useTranslations.

Fügen Sie den 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 eine 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 für Hot-Reloading in der Entwicklung zu Ihrer Datei .env.local hinzu:

.env.local

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

Nur für die Entwicklung: Setze GT_API_KEY nicht in der Produktion – er ist ausschließlich für Hot-Reloading während der Entwicklung.

Sichere dir kostenlose API-Schlüssel unter dash.generaltranslation.com oder führe Folgendes aus:

npx gtx-cli auth

Verwendung

Jetzt können Sie mit der Internationalisierung Ihrer Inhalte beginnen. Es gibt zwei grundlegende Ansä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 nutzen 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 Serverkomponenten 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 kann zu kurzer Ladezeit kommen). In der Produktion ist alles vorab übersetzt.

Fehlerbehebung

Deployment

Für die Produktion müssen Inhalte vorab übersetzt werden, da Übersetzungen zur Laufzeit deaktiviert sind (ausgenommen die Funktionen <Tx> und tx).

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

Produktionsschlüssel beginnen mit gtx-api- (im Unterschied zu Dev-Schlüsseln, die mit gtx-dev- beginnen). Weitere Informationen zu Umgebungsunterschieden.
Zu Ihrer CI/CD-Umgebung hinzufügen:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Produktionsschlüssel niemals mit „NEXT_PUBLIC_“ prefixen – sie dürfen ausschließlich serverseitig verwendet werden.
Den translate-Befehl ausführen, um Ihre Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Das Verhalten des translate-Befehls können Sie in der Datei gt.config.json konfigurieren.

Weitere Informationen finden Sie im Referenzhandbuch zum CLI-Tool.

Ihr Build-Skript aktualisieren, damit vor dem Build übersetzt wird:

package.json

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

Nächste Schritte

<T> Component Guide - Detaillierte Einführung in die Komponente <T> und die Übersetzung in JSX
String Translation Guide - Nutzung von useGT und getGT
Variable Components - Umgang mit dynamischen Inhalten mit <Var>, <Num> usw.

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

Installation

Installiere 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: Verwende npx gtx-cli@latest für die automatische Konfiguration. Siehe die Anleitung zum Setup-Assistenten oder nutze unsere 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 einen Übersetzungskontext bereit. Sie verwaltet die Locale, Übersetzungen und aktiviert die Hooks useGT und useTranslations.

Fügen Sie den 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 eine 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 für Hot-Reloading in der Entwicklung zu Ihrer Datei .env.local hinzu:

.env.local

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

Nur für die Entwicklung: Setze GT_API_KEY nicht in der Produktion – er ist ausschließlich für Hot-Reloading während der Entwicklung.

Sichere dir kostenlose API-Schlüssel unter dash.generaltranslation.com oder führe Folgendes aus:

npx gtx-cli auth

Verwendung

Jetzt können Sie mit der Internationalisierung Ihrer Inhalte beginnen. Es gibt zwei grundlegende Ansä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 nutzen 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 Serverkomponenten 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 kann zu kurzer Ladezeit kommen). In der Produktion ist alles vorab übersetzt.

Fehlerbehebung

Deployment

Für die Produktion müssen Inhalte vorab übersetzt werden, da Übersetzungen zur Laufzeit deaktiviert sind (ausgenommen die Funktionen <Tx> und tx).

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

Produktionsschlüssel beginnen mit gtx-api- (im Unterschied zu Dev-Schlüsseln, die mit gtx-dev- beginnen). Weitere Informationen zu Umgebungsunterschieden.
Zu Ihrer CI/CD-Umgebung hinzufügen:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Produktionsschlüssel niemals mit „NEXT_PUBLIC_“ prefixen – sie dürfen ausschließlich serverseitig verwendet werden.
Den translate-Befehl ausführen, um Ihre Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Das Verhalten des translate-Befehls können Sie in der Datei gt.config.json konfigurieren.

Weitere Informationen finden Sie im Referenzhandbuch zum CLI-Tool.

Ihr Build-Skript aktualisieren, damit vor dem Build übersetzt wird:

package.json

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

Nächste Schritte

<T> Component Guide - Detaillierte Einführung in die Komponente <T> und die Übersetzung in JSX
String Translation Guide - Nutzung von useGT und getGT
Variable Components - Umgang mit dynamischen Inhalten mit <Var>, <Num> usw.

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

Installation

Installiere 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: Verwende npx gtx-cli@latest für die automatische Konfiguration. Siehe die Anleitung zum Setup-Assistenten oder nutze unsere 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 einen Übersetzungskontext bereit. Sie verwaltet die Locale, Übersetzungen und aktiviert die Hooks useGT und useTranslations.

Fügen Sie den 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 eine 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 für Hot-Reloading in der Entwicklung zu Ihrer Datei .env.local hinzu:

.env.local

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

Nur für die Entwicklung: Setze GT_API_KEY nicht in der Produktion – er ist ausschließlich für Hot-Reloading während der Entwicklung.

Sichere dir kostenlose API-Schlüssel unter dash.generaltranslation.com oder führe Folgendes aus:

npx gtx-cli auth

Verwendung

Jetzt können Sie mit der Internationalisierung Ihrer Inhalte beginnen. Es gibt zwei grundlegende Ansä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 nutzen 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 Serverkomponenten 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 kann zu kurzer Ladezeit kommen). In der Produktion ist alles vorab übersetzt.

Fehlerbehebung

Deployment

Für die Produktion müssen Inhalte vorab übersetzt werden, da Übersetzungen zur Laufzeit deaktiviert sind (ausgenommen die Funktionen <Tx> und tx).

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

Produktionsschlüssel beginnen mit gtx-api- (im Unterschied zu Dev-Schlüsseln, die mit gtx-dev- beginnen). Weitere Informationen zu Umgebungsunterschieden.
Zu Ihrer CI/CD-Umgebung hinzufügen:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Produktionsschlüssel niemals mit „NEXT_PUBLIC_“ prefixen – sie dürfen ausschließlich serverseitig verwendet werden.
Den translate-Befehl ausführen, um Ihre Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Das Verhalten des translate-Befehls können Sie in der Datei gt.config.json konfigurieren.

Weitere Informationen finden Sie im Referenzhandbuch zum CLI-Tool.

Ihr Build-Skript aktualisieren, damit vor dem Build übersetzt wird:

package.json

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

Nächste Schritte

<T> Component Guide - Detaillierte Einführung in die Komponente <T> und die Übersetzung in JSX
String Translation Guide - Nutzung von useGT und getGT
Variable Components - Umgang mit dynamischen Inhalten mit <Var>, <Num> usw.

Next.js Schnellstart

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

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

Warum dauert das Laden der 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 verwenden möchte?

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

Warum dauert das Laden der 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 verwenden möchte?

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

Warum dauert das Laden der 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