Démarrage rapide Next.js

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

Configuration rapide : Exécutez npx gtx-cli@latest pour une configuration automatique. Consultez le guide de l’assistant de configuration ou utilisez notre intégration aux outils d’IA.

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`

Le composant GTProvider fournit le contexte de traduction aux composants côté client. Il gère l’état du 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 voir les options.

Variables d'environnement

Ajoutez ceci à votre fichier .env.local pour le rechargement à chaud en développement :

.env.local

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

Développement uniquement : Ne définissez pas GT_API_KEY en production — il sert uniquement au rechargement à chaud en développement.

Obtenez vos 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 de variables comme <Var> :

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

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

Voir le guide sur l’utilisation du composant <T> pour plus d’informations.

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 pour l'e-mail')}
    />
  );
}

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

Consultez le guide consacré à la traduction des 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 langue à 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.

En développement, les traductions sont effectuées à la demande (un bref temps de chargement peut apparaître). En production, tout est prétraduit.

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 entre environnements.
Ajoutez ces variables à 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 de traduction pour traduire votre contenu :
```
npx gtx-cli translate
```
Vous pouvez configurer le comportement de la commande avec le fichier gt.config.json.

Consultez le guide de référence de l’outil CLI pour en savoir plus.

Mettez à jour votre script de build pour lancer la traduction avant la build :

package.json

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

Prochaines étapes

Guide du composant <T> - Exploration détaillée du composant <T> et de la traduction JSX
Guide de traduction des chaînes - Utilisation de useGT et getGT
Composants de variables - Gérez du contenu dynamique avec <Var>, <Num>, etc.

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

Configuration rapide : Exécutez npx gtx-cli@latest pour une configuration automatique. Consultez le guide de l’assistant de configuration ou utilisez notre intégration aux outils d’IA.

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`

Le composant GTProvider fournit le contexte de traduction aux composants côté client. Il gère l’état du 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 voir les options.

Variables d'environnement

Ajoutez ceci à votre fichier .env.local pour le rechargement à chaud en développement :

.env.local

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

Développement uniquement : Ne définissez pas GT_API_KEY en production — il sert uniquement au rechargement à chaud en développement.

Obtenez vos 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 de variables comme <Var> :

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

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

Voir le guide sur l’utilisation du composant <T> pour plus d’informations.

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 pour l'e-mail')}
    />
  );
}

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

Consultez le guide consacré à la traduction des 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 langue à 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.

En développement, les traductions sont effectuées à la demande (un bref temps de chargement peut apparaître). En production, tout est prétraduit.

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 entre environnements.
Ajoutez ces variables à 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 de traduction pour traduire votre contenu :
```
npx gtx-cli translate
```
Vous pouvez configurer le comportement de la commande avec le fichier gt.config.json.

Consultez le guide de référence de l’outil CLI pour en savoir plus.

Mettez à jour votre script de build pour lancer la traduction avant la build :

package.json

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

Prochaines étapes

Guide du composant <T> - Exploration détaillée du composant <T> et de la traduction JSX
Guide de traduction des chaînes - Utilisation de useGT et getGT
Composants de variables - Gérez du contenu dynamique avec <Var>, <Num>, etc.

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

Configuration rapide : Exécutez npx gtx-cli@latest pour une configuration automatique. Consultez le guide de l’assistant de configuration ou utilisez notre intégration aux outils d’IA.

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`

Le composant GTProvider fournit le contexte de traduction aux composants côté client. Il gère l’état du 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 voir les options.

Variables d'environnement

Ajoutez ceci à votre fichier .env.local pour le rechargement à chaud en développement :

.env.local

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

Développement uniquement : Ne définissez pas GT_API_KEY en production — il sert uniquement au rechargement à chaud en développement.

Obtenez vos 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 de variables comme <Var> :

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

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

Voir le guide sur l’utilisation du composant <T> pour plus d’informations.

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 pour l'e-mail')}
    />
  );
}

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

Consultez le guide consacré à la traduction des 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 langue à 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.

En développement, les traductions sont effectuées à la demande (un bref temps de chargement peut apparaître). En production, tout est prétraduit.

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 entre environnements.
Ajoutez ces variables à 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 de traduction pour traduire votre contenu :
```
npx gtx-cli translate
```
Vous pouvez configurer le comportement de la commande avec le fichier gt.config.json.

Consultez le guide de référence de l’outil CLI pour en savoir plus.

Mettez à jour votre script de build pour lancer la traduction avant la build :

package.json

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

Prochaines étapes

Guide du composant <T> - Exploration détaillée du composant <T> et de la traduction JSX
Guide de traduction des chaînes - Utilisation de useGT et getGT
Composants de variables - Gérez du contenu dynamique avec <Var>, <Num>, etc.

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

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

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