Démarrage rapide Next.js

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

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

Installation

Installez les paquets 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 un contexte de traduction aux composants client-side. Il gère l’état du locale, les traductions et permet d’utiliser les hooks useGT et useTranslations.

Ajoutez GTProvider à vos layouts 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"

En développement uniquement : N’utilisez pas GT_API_KEY en production — c’est uniquement destiné au rechargement à chaud en développement.

Récupérez 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>`

Encapsulez 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 pour l'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.

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

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- (contrairement aux 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 exclusivement côté serveur.
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 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 des 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

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

Installation

Installez les paquets 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 un contexte de traduction aux composants client-side. Il gère l’état du locale, les traductions et permet d’utiliser les hooks useGT et useTranslations.

Ajoutez GTProvider à vos layouts 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"

En développement uniquement : N’utilisez pas GT_API_KEY en production — c’est uniquement destiné au rechargement à chaud en développement.

Récupérez 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>`

Encapsulez 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 pour l'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.

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

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- (contrairement aux 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 exclusivement côté serveur.
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 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 des 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

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

Installation

Installez les paquets 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 un contexte de traduction aux composants client-side. Il gère l’état du locale, les traductions et permet d’utiliser les hooks useGT et useTranslations.

Ajoutez GTProvider à vos layouts 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"

En développement uniquement : N’utilisez pas GT_API_KEY en production — c’est uniquement destiné au rechargement à chaud en développement.

Récupérez 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>`

Encapsulez 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 pour l'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.

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

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- (contrairement aux 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 exclusivement côté serveur.
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 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 des chaînes - Utiliser useGT et getGT
Composants de variables - Gérez le 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 du temps à se charger en dev ?

Pourquoi certaines traductions sont-elles inexactes ?

Et 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 du temps à se charger en dev ?

Pourquoi certaines traductions sont-elles inexactes ?

Et 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 du temps à se charger en dev ?

Pourquoi certaines traductions sont-elles inexactes ?

Et 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