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 une configuration automatique. Consultez le guide Assistant d’installation ou utilisez notre intégration des outils 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 mises en page racine :

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 ceci à 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"

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 les é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 de chaînes pour en savoir plus.

Tester 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 de langue via le menu déroulant de sélection de locale.

En développement, les traductions se font à la demande (un bref chargement peut apparaître). En production, tout est prétraduït.

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 composants/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 entre 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 uniquement côté serveur.
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...>"
  }
}

Prochaines étapes

Guide du composant <T> - Approfondissez le composant <T> et la traduction JSX
Guide de traduction de chaînes - Utiliser useGT et 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 rapide : Essayez npx gtx-cli@latest pour une configuration automatique. Consultez le guide Assistant d’installation ou utilisez notre intégration des outils 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
});

`GTProvider`

Ajoutez GTProvider à votre ou vos mises en page racine :

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 ceci à 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"

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 les é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 de chaînes pour en savoir plus.

Tester 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 de langue via le menu déroulant de sélection de locale.

En développement, les traductions se font à la demande (un bref chargement peut apparaître). En production, tout est prétraduït.

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 composants/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 entre 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 uniquement côté serveur.
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...>"
  }
}

Prochaines étapes

Guide du composant <T> - Approfondissez le composant <T> et la traduction JSX
Guide de traduction de chaînes - Utiliser useGT et 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 rapide : Essayez npx gtx-cli@latest pour une configuration automatique. Consultez le guide Assistant d’installation ou utilisez notre intégration des outils 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
});

`GTProvider`

Ajoutez GTProvider à votre ou vos mises en page racine :

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 ceci à 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"

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 les é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 de chaînes pour en savoir plus.

Tester 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 de langue via le menu déroulant de sélection de locale.

En développement, les traductions se font à la demande (un bref chargement peut apparaître). En production, tout est prétraduït.

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 composants/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 entre 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 uniquement côté serveur.
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...>"
  }
}

Prochaines étapes

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

Guide de démarrage rapide 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

Guide de démarrage rapide 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

Guide de démarrage rapide 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