GitHub

Prérequis : App Router de Next.js, connaissances de base en JavaScript

Installation

Installez les packages gt-next et 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

Configuration rapide : Essayez npx gtx-cli@latest pour configurer automatiquement le projet. Consultez le guide de l’assistant de configuration ou utilisez notre intégration des outils d’IA.

Configuration

`withGTConfig`

La fonction withGTConfig initialise le SDK dans votre application Next.js. Ajoutez-la à votre fichier next.config.[js|ts] :

next.config.ts

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

const nextConfig = {
  // Votre configuration Next.js existante
};

export default withGTConfig(nextConfig. {
  // Options de configuration GT supplémentaires
});

Le composant GTProvider fournit le contexte de traduction aux composants exécutés côté client. Il gère l’état de la locale, les traductions et permet d’utiliser les hooks useGT et useTranslations.

Ajoutez GTProvider à votre ou vos layouts racines :

app/layout.tsx

import { GTProvider } from 'gt-next';

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

Créez un fichier gt.config.json à la racine de votre projet :

gt.config.json

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

Personnalisez les locales de votre projet. Consultez les locales prises en charge pour connaître les options.

Variables d’environnement

Ajoutez ce qui suit à votre fichier .env.local pour activer le rechargement à chaud en développement :

.env.local

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

En développement uniquement : N'ajoutez pas GT_API_KEY en production – cette variable ne sert qu'au rechargement à chaud en développement.

Obtenez des API Keys gratuites sur dash.generaltranslation.com ou exécutez :

npx gtx-cli auth

Utilisation

Vous pouvez maintenant commencer à internationaliser votre contenu. Deux approches principales s’offrent à vous :

Contenu JSX avec `<T>`

Enveloppez des éléments JSX pour les traduire à l’aide du composant <T> :

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Bienvenue dans notre application !</h1>
    </T>
  );
}

Pour le contenu dynamique, utilisez des composants variables comme <Var> :

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

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

Consultez le guide sur l’utilisation du composant <T> pour en savoir plus.

Chaînes simples avec `useGT`

Pour les attributs, les libellés et le texte brut avec le hook useGT :

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Saisissez votre e-mail')}
      aria-label={t('Champ de saisie e-mail')}
    />
  );
}

Pour les composants serveur, utilisez getGT plutôt que useGT.

Consultez le guide sur la traduction des chaînes pour en savoir plus.

Testez votre application

Testez vos traductions en changeant de langue :

Ajoutez un menu déroulant de sélection de locale à l’aide de <LocaleSelector> :

import { LocaleSelector } from 'gt-next';

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

Démarrez votre serveur de développement :

npm run dev

yarn run dev

bun run dev

pnpm run dev

Accédez à localhost:3000 et changez la langue via le menu déroulant de sélection de locale.

En développement, les traductions se font à la demande (un court temps de chargement s’affiche). En production, tout est prétraduits.

Dépannage

Déploiement

En production, vous devez prétraduire le contenu, car la traduction à l’exécution est désactivée (sauf pour les fonctions <Tx> et tx).

Obtenez une clé d’API de production sur dash.generaltranslation.com.

Les clés de production commencent par gtx-api- (à la différence des clés de développement, qui commencent par gtx-dev-). En savoir plus sur les différences d’environnements.
Ajoutez-les à votre environnement CI/CD :
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Ne préfixez jamais les clés de production avec NEXT_PUBLIC_ — elles doivent rester côté serveur uniquement.
Exécutez la commande translate pour traduire votre contenu :
```
npx gtx-cli translate
```
Vous pouvez configurer le comportement de la commande translate avec le fichier gt.config.json.

Consultez le guide de référence de l’outil CLI pour plus d’informations.

Mettez à jour votre script de build pour traduire avant la construction :

package.json

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

Étapes suivantes

Guide du composant <T> - Analyse approfondie du composant <T> et de la traduction JSX
Guide de traduction de chaînes - Utilisation de useGT et de getGT
Composants de variables - Gérez le contenu dynamique avec <Var>, <Num>, etc.

Prérequis : App Router de Next.js, connaissances de base en JavaScript

Installation

Installez les packages gt-next et 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

Configuration

`withGTConfig`

La fonction withGTConfig initialise le SDK dans votre application Next.js. Ajoutez-la à votre fichier next.config.[js|ts] :

next.config.ts

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

const nextConfig = {
  // Votre configuration Next.js existante
};

export default withGTConfig(nextConfig. {
  // Options de configuration GT supplémentaires
});

`GTProvider`

Ajoutez GTProvider à votre ou vos layouts racines :

app/layout.tsx

import { GTProvider } from 'gt-next';

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

Créez un fichier gt.config.json à la racine de votre projet :

gt.config.json

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

Personnalisez les locales de votre projet. Consultez les locales prises en charge pour connaître les options.

Variables d’environnement

Ajoutez ce qui suit à votre fichier .env.local pour activer le rechargement à chaud en développement :

.env.local

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

En développement uniquement : N'ajoutez pas GT_API_KEY en production – cette variable ne sert qu'au rechargement à chaud en développement.

Obtenez des API Keys gratuites sur dash.generaltranslation.com ou exécutez :

npx gtx-cli auth

Utilisation

Vous pouvez maintenant commencer à internationaliser votre contenu. Deux approches principales s’offrent à vous :

Contenu JSX avec `<T>`

Enveloppez des éléments JSX pour les traduire à l’aide du composant <T> :

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Bienvenue dans notre application !</h1>
    </T>
  );
}

Pour le contenu dynamique, utilisez des composants variables comme <Var> :

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

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

Consultez le guide sur l’utilisation du composant <T> pour en savoir plus.

Chaînes simples avec `useGT`

Pour les attributs, les libellés et le texte brut avec le hook useGT :

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Saisissez votre e-mail')}
      aria-label={t('Champ de saisie e-mail')}
    />
  );
}

Pour les composants serveur, utilisez getGT plutôt que useGT.

Consultez le guide sur la traduction des chaînes pour en savoir plus.

Testez votre application

Testez vos traductions en changeant de langue :

Ajoutez un menu déroulant de sélection de locale à l’aide de <LocaleSelector> :

import { LocaleSelector } from 'gt-next';

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

Démarrez votre serveur de développement :

npm run dev

yarn run dev

bun run dev

pnpm run dev

Accédez à localhost:3000 et changez la langue via le menu déroulant de sélection de locale.

En développement, les traductions se font à la demande (un court temps de chargement s’affiche). En production, tout est prétraduits.

Dépannage

Déploiement

En production, vous devez prétraduire le contenu, car la traduction à l’exécution est désactivée (sauf pour les fonctions <Tx> et tx).

Obtenez une clé d’API de production sur dash.generaltranslation.com.

Les clés de production commencent par gtx-api- (à la différence des clés de développement, qui commencent par gtx-dev-). En savoir plus sur les différences d’environnements.
Ajoutez-les à votre environnement CI/CD :
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Ne préfixez jamais les clés de production avec NEXT_PUBLIC_ — elles doivent rester côté serveur uniquement.
Exécutez la commande translate pour traduire votre contenu :
```
npx gtx-cli translate
```
Vous pouvez configurer le comportement de la commande translate avec le fichier gt.config.json.

Consultez le guide de référence de l’outil CLI pour plus d’informations.

Mettez à jour votre script de build pour traduire avant la construction :

package.json

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

Étapes suivantes

Guide du composant <T> - Analyse approfondie du composant <T> et de la traduction JSX
Guide de traduction de chaînes - Utilisation de useGT et de getGT
Composants de variables - Gérez le contenu dynamique avec <Var>, <Num>, etc.

Prérequis : App Router de Next.js, connaissances de base en JavaScript

Installation

Installez les packages gt-next et 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

Configuration

`withGTConfig`

La fonction withGTConfig initialise le SDK dans votre application Next.js. Ajoutez-la à votre fichier next.config.[js|ts] :

next.config.ts

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

const nextConfig = {
  // Votre configuration Next.js existante
};

export default withGTConfig(nextConfig. {
  // Options de configuration GT supplémentaires
});

`GTProvider`

Ajoutez GTProvider à votre ou vos layouts racines :

app/layout.tsx

import { GTProvider } from 'gt-next';

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

Créez un fichier gt.config.json à la racine de votre projet :

gt.config.json

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

Personnalisez les locales de votre projet. Consultez les locales prises en charge pour connaître les options.

Variables d’environnement

Ajoutez ce qui suit à votre fichier .env.local pour activer le rechargement à chaud en développement :

.env.local

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

En développement uniquement : N'ajoutez pas GT_API_KEY en production – cette variable ne sert qu'au rechargement à chaud en développement.

Obtenez des API Keys gratuites sur dash.generaltranslation.com ou exécutez :

npx gtx-cli auth

Utilisation

Vous pouvez maintenant commencer à internationaliser votre contenu. Deux approches principales s’offrent à vous :

Contenu JSX avec `<T>`

Enveloppez des éléments JSX pour les traduire à l’aide du composant <T> :

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Bienvenue dans notre application !</h1>
    </T>
  );
}

Pour le contenu dynamique, utilisez des composants variables comme <Var> :

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

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

Consultez le guide sur l’utilisation du composant <T> pour en savoir plus.

Chaînes simples avec `useGT`

Pour les attributs, les libellés et le texte brut avec le hook useGT :

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Saisissez votre e-mail')}
      aria-label={t('Champ de saisie e-mail')}
    />
  );
}

Pour les composants serveur, utilisez getGT plutôt que useGT.

Consultez le guide sur la traduction des chaînes pour en savoir plus.

Testez votre application

Testez vos traductions en changeant de langue :

Ajoutez un menu déroulant de sélection de locale à l’aide de <LocaleSelector> :

import { LocaleSelector } from 'gt-next';

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

Démarrez votre serveur de développement :

npm run dev

yarn run dev

bun run dev

pnpm run dev

Accédez à localhost:3000 et changez la langue via le menu déroulant de sélection de locale.

En développement, les traductions se font à la demande (un court temps de chargement s’affiche). En production, tout est prétraduits.

Dépannage

Déploiement

En production, vous devez prétraduire le contenu, car la traduction à l’exécution est désactivée (sauf pour les fonctions <Tx> et tx).

Obtenez une clé d’API de production sur dash.generaltranslation.com.

Les clés de production commencent par gtx-api- (à la différence des clés de développement, qui commencent par gtx-dev-). En savoir plus sur les différences d’environnements.
Ajoutez-les à votre environnement CI/CD :
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Ne préfixez jamais les clés de production avec NEXT_PUBLIC_ — elles doivent rester côté serveur uniquement.
Exécutez la commande translate pour traduire votre contenu :
```
npx gtx-cli translate
```
Vous pouvez configurer le comportement de la commande translate avec le fichier gt.config.json.

Consultez le guide de référence de l’outil CLI pour plus d’informations.

Mettez à jour votre script de build pour traduire avant la construction :

package.json

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

Étapes suivantes

Guide du composant <T> - Analyse approfondie du composant <T> et de la traduction JSX
Guide de traduction de chaînes - Utilisation de useGT et de getGT
Composants de variables - Gérez le contenu dynamique avec <Var>, <Num>, etc.

Démarrage rapide avec Next.js

Et si je ne veux pas utiliser la plateforme General Translation ?

La langue de mon application ne change pas, même si j’ai modifié la langue de mon navigateur.

Pourquoi les langues mettent-elles longtemps à se charger en dev ?

Pourquoi certaines traductions sont-elles inexactes ?

Que faire si je n’utilise pas la plateforme General Translation ?

Sur cette page

Démarrage rapide avec Next.js

Et si je ne veux pas utiliser la plateforme General Translation ?

La langue de mon application ne change pas, même si j’ai modifié la langue de mon navigateur.

Pourquoi les langues mettent-elles longtemps à se charger en dev ?

Pourquoi certaines traductions sont-elles inexactes ?

Que faire si je n’utilise pas la plateforme General Translation ?

Sur cette page

Démarrage rapide avec Next.js

Et si je ne veux pas utiliser la plateforme General Translation ?

La langue de mon application ne change pas, même si j’ai modifié la langue de mon navigateur.

Pourquoi les langues mettent-elles longtemps à se charger en dev ?

Pourquoi certaines traductions sont-elles inexactes ?

Que faire si je n’utilise pas la plateforme General Translation ?

Sur cette page

GitHubMettre une étoile sur GitHub

GitHubMettre une étoile sur GitHub

Mettre une étoile sur GitHub

Mettre une étoile sur GitHub