Next.js Schnellstart

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

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 KI-Tools-Integration.

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

Konfiguration

`withGTConfig`

Die Funktion withGTConfig initialisiert das SDK in Ihrer Next.js-App. Fügen Sie sie in 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 den Locale-Status, die Ü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>
  );
}

Erstelle im Projektstammverzeichnis eine Datei namens 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 während der Entwicklung zu Ihrer Datei .env.local hinzu:

.env.local

GT_API_KEY="Ihr Dev-API-Key"
GT_PROJECT_ID="Ihre Projekt-id"

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

Hole 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ße 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 Variablenkomponenten 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 Komponente <T> für weitere Informationen.

Einfache Strings mit `useGT`

Für Attribute, Bezeichnungen 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 Auswahlmenü für die Locale 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 Locale-Auswahlmenü.

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

Fehlerbehebung

Deployment

Für die Produktion musst du Inhalte vorab übersetzen, da die Übersetzung zur Laufzeit deaktiviert ist (außer für die Funktionen <Tx> und tx).

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

Produktionsschlüssel beginnen mit gtx-api- (anders als Dev-Schlüssel, die mit gtx-dev- beginnen). Erfahre mehr über Unterschiede zwischen Umgebungen.
Zu deiner CI/CD-Umgebung hinzufügen:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Niemals Produktionsschlüssel mit NEXT_PUBLIC_ präfixen – sie sollten ausschließlich serverseitig bleiben.
Den translate-Befehl ausführen, um deine Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Du kannst das Verhalten des translate-Befehls mit der Datei gt.config.json konfigurieren.

Siehe den Referenzleitfaden zum CLI-Tool für weitere Informationen.

Dein Build-Skript aktualisieren, um vor dem Build zu übersetzen:

package.json

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

Nächste Schritte

Leitfaden zur <T>‑Komponente – Ausführlicher Einblick in die <T>-Komponente und JSX-Übersetzung
Leitfaden zur String-Übersetzung – Verwendung von useGT und getGT
Variable Komponenten – Dynamische Inhalte mit <Var>, <Num> usw. verarbeiten

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

Konfiguration

`withGTConfig`

Die Funktion withGTConfig initialisiert das SDK in Ihrer Next.js-App. Fügen Sie sie in 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 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>
  );
}

Erstelle im Projektstammverzeichnis eine Datei namens 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 während der Entwicklung zu Ihrer Datei .env.local hinzu:

.env.local

GT_API_KEY="Ihr Dev-API-Key"
GT_PROJECT_ID="Ihre Projekt-id"

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

Hole 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ße 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 Variablenkomponenten 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 Komponente <T> für weitere Informationen.

Einfache Strings mit `useGT`

Für Attribute, Bezeichnungen 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 Auswahlmenü für die Locale 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 Locale-Auswahlmenü.

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

Fehlerbehebung

Deployment

Für die Produktion musst du Inhalte vorab übersetzen, da die Übersetzung zur Laufzeit deaktiviert ist (außer für die Funktionen <Tx> und tx).

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

Produktionsschlüssel beginnen mit gtx-api- (anders als Dev-Schlüssel, die mit gtx-dev- beginnen). Erfahre mehr über Unterschiede zwischen Umgebungen.
Zu deiner CI/CD-Umgebung hinzufügen:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Niemals Produktionsschlüssel mit NEXT_PUBLIC_ präfixen – sie sollten ausschließlich serverseitig bleiben.
Den translate-Befehl ausführen, um deine Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Du kannst das Verhalten des translate-Befehls mit der Datei gt.config.json konfigurieren.

Siehe den Referenzleitfaden zum CLI-Tool für weitere Informationen.

Dein Build-Skript aktualisieren, um vor dem Build zu übersetzen:

package.json

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

Nächste Schritte

Leitfaden zur <T>‑Komponente – Ausführlicher Einblick in die <T>-Komponente und JSX-Übersetzung
Leitfaden zur String-Übersetzung – Verwendung von useGT und getGT
Variable Komponenten – Dynamische Inhalte mit <Var>, <Num> usw. verarbeiten

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

Konfiguration

`withGTConfig`

Die Funktion withGTConfig initialisiert das SDK in Ihrer Next.js-App. Fügen Sie sie in 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 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>
  );
}

Erstelle im Projektstammverzeichnis eine Datei namens 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 während der Entwicklung zu Ihrer Datei .env.local hinzu:

.env.local

GT_API_KEY="Ihr Dev-API-Key"
GT_PROJECT_ID="Ihre Projekt-id"

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

Hole 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ße 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 Variablenkomponenten 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 Komponente <T> für weitere Informationen.

Einfache Strings mit `useGT`

Für Attribute, Bezeichnungen 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 Auswahlmenü für die Locale 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 Locale-Auswahlmenü.

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

Fehlerbehebung

Deployment

Für die Produktion musst du Inhalte vorab übersetzen, da die Übersetzung zur Laufzeit deaktiviert ist (außer für die Funktionen <Tx> und tx).

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

Produktionsschlüssel beginnen mit gtx-api- (anders als Dev-Schlüssel, die mit gtx-dev- beginnen). Erfahre mehr über Unterschiede zwischen Umgebungen.
Zu deiner CI/CD-Umgebung hinzufügen:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Niemals Produktionsschlüssel mit NEXT_PUBLIC_ präfixen – sie sollten ausschließlich serverseitig bleiben.
Den translate-Befehl ausführen, um deine Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Du kannst das Verhalten des translate-Befehls mit der Datei gt.config.json konfigurieren.

Siehe den Referenzleitfaden zum CLI-Tool für weitere Informationen.

Dein Build-Skript aktualisieren, um vor dem Build zu übersetzen:

package.json

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

Nächste Schritte

Leitfaden zur <T>‑Komponente – Ausführlicher Einblick in die <T>-Komponente und JSX-Übersetzung
Leitfaden zur String-Übersetzung – Verwendung von useGT und getGT
Variable Komponenten – Dynamische Inhalte mit <Var>, <Num> usw. verarbeiten

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 von Sprachen in der Dev-Umgebung 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 von Sprachen in der Dev-Umgebung 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 von Sprachen in der Dev-Umgebung so lange?

Warum sind einige Übersetzungen ungenau?

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

Auf dieser Seite

GitHubAuf GitHub mit Stern markieren

GitHubAuf GitHub mit Stern markieren

Auf GitHub mit Stern markieren

Auf GitHub mit Stern markieren