Next.js Schnellstart

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

Schnelle Einrichtung: Probiere npx gtx-cli@latest für die automatische Konfiguration. Sieh dir die Anleitung zum Setup-Assistenten an oder nutze unsere KI-Tools-Integration.

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
});

Die GTProvider-Komponente stellt Client-seitigen Komponenten einen Übersetzungskontext zur Verfügung. 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>
  );
}

Lege im Projektstammverzeichnis eine Datei namens gt.config.json an:

gt.config.json

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

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

Umgebungsvariablen

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

.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.

Erhalte 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 Hauptansä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 Nutzung 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

Bereitstellung

Für die Produktion musst du Inhalte vorab übersetzen, da die Übersetzung zur Laufzeit deaktiviert ist (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). 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 dürfen nur serverseitig verwendet werden.
Den translate-Befehl ausführen, um deine Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Du kannst das Verhalten des translate-Befehls in 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 – Tiefgehender Einblick in die <T>-Komponente und JSX-Übersetzung
Leitfaden zur Zeichenkettenübersetzung – Verwendung von useGT und getGT
Variable Komponenten – Dynamische Inhalte mit <Var>, <Num> usw. verarbeiten

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

Schnelle Einrichtung: Probiere npx gtx-cli@latest für die automatische Konfiguration. Sieh dir die Anleitung zum Setup-Assistenten an oder nutze unsere KI-Tools-Integration.

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 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>
  );
}

Lege im Projektstammverzeichnis eine Datei namens gt.config.json an:

gt.config.json

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

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

Umgebungsvariablen

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

.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.

Erhalte 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 Hauptansä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 Nutzung 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

Bereitstellung

Für die Produktion musst du Inhalte vorab übersetzen, da die Übersetzung zur Laufzeit deaktiviert ist (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). 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 dürfen nur serverseitig verwendet werden.
Den translate-Befehl ausführen, um deine Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Du kannst das Verhalten des translate-Befehls in 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 – Tiefgehender Einblick in die <T>-Komponente und JSX-Übersetzung
Leitfaden zur Zeichenkettenübersetzung – Verwendung von useGT und getGT
Variable Komponenten – Dynamische Inhalte mit <Var>, <Num> usw. verarbeiten

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

Schnelle Einrichtung: Probiere npx gtx-cli@latest für die automatische Konfiguration. Sieh dir die Anleitung zum Setup-Assistenten an oder nutze unsere KI-Tools-Integration.

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 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>
  );
}

Lege im Projektstammverzeichnis eine Datei namens gt.config.json an:

gt.config.json

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

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

Umgebungsvariablen

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

.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.

Erhalte 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 Hauptansä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 Nutzung 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

Bereitstellung

Für die Produktion musst du Inhalte vorab übersetzen, da die Übersetzung zur Laufzeit deaktiviert ist (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). 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 dürfen nur serverseitig verwendet werden.
Den translate-Befehl ausführen, um deine Inhalte zu übersetzen:
```
npx gtx-cli translate
```
Du kannst das Verhalten des translate-Befehls in 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 – Tiefgehender Einblick in die <T>-Komponente und JSX-Übersetzung
Leitfaden zur Zeichenkettenü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 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

GitHubAuf GitHub mit Stern markieren

GitHubAuf GitHub mit Stern markieren

Auf GitHub mit Stern markieren

Auf GitHub mit Stern markieren