# General Translation React SDKs (gt-react, gt-next, gt-react-native): Quickstart App Router de Next.js
URL: https://generaltranslation.com/fr/docs/react/nextjs-quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Ajoutez plusieurs langues à une application Next.js avec App Router grâce à General Translation en moins de 10 minutes.
À la fin de ce guide, votre application Next.js affichera du contenu en plusieurs langues, avec un sélecteur de langue que vos utilisateurs pourront utiliser.
**Prérequis :**
* Une application Next.js utilisant l’**App Router** (Next.js 13.0.0 ou version ultérieure, à l’exclusion des versions 15.2.1 et 15.2.2)
* Node.js 18+
**Astuce :** Exécutez `npx gt@latest` pour tout configurer avec l’[assistant de configuration](/docs/cli/quickstart). Ce guide couvre la configuration manuelle.
**Remarque :** Si vous utilisez le Pages Router, suivez plutôt le [Quickstart Pages Router de Next.js](/docs/react/nextjs-pages-router-quickstart).
## Quickstart [#quickstart]
### 1. Installez les packages
`gt-next` est la bibliothèque qui gère les traductions dans votre application. `gt` est l’outil CLI qui prépare les traductions pour la production.
```bash
npm i gt-next
npm i -D gt
```
```bash
yarn add gt-next
yarn add --dev gt
```
```bash
bun add gt-next
bun add --dev gt
```
```bash
pnpm add gt-next
pnpm add --save-dev gt
```
### 2. Configurez votre fichier de configuration Next.js
`gt-next` utilise un plugin Next.js appelé **`withGTConfig`** pour configurer l’internationalisation au build. Encapsulez votre configuration Next.js existante avec celui-ci. Dans cet extrait et les suivants, les lignes vertes sont ajoutées et les lignes rouges supprimées ; conservez toutes les options déjà présentes dans votre configuration :
```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config'; // [!code ++]
const nextConfig = {};
export default nextConfig; // [!code --]
export default withGTConfig(nextConfig); // [!code ++]
```
Ce plugin lit vos paramètres de traduction et s’occupe de tout en arrière-plan. Aucune autre modification de votre configuration Next.js n’est nécessaire.
### 3. Créez un fichier de configuration de traduction
Créez un fichier **`gt.config.json`** à la racine de votre projet. Ce fichier indique à la bibliothèque quelles langues votre application prend en charge :
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "public/_gt/[locale].json"
}
}
}
```
* **`defaultLocale`** — la langue dans laquelle votre application est écrite (votre langue source).
* **`locales`** — les langues dans lesquelles vous souhaitez traduire. Choisissez celles que vous voulez dans la [liste des paramètres régionaux pris en charge](/docs/platform/dashboard/reference/supported-locales).
* **`files.gt.output`** — l’emplacement où le CLI enregistre les fichiers de traduction. `[locale]` est remplacé par chaque code de langue (par ex. `public/_gt/es.json`).
Ajoutez `public/_gt/` à votre **`.gitignore`** — ces fichiers sont générés, pas écrits à la main :
```txt title=".gitignore"
public/_gt/
```
### 4. Ajoutez une fonction de chargement pour les traductions locales
Créez un fichier **[`loadTranslations`](/docs/react/reference/functions/load-translations)** dans votre répertoire `src/` (ou à la racine du projet). Cela indique à `gt-next` comment charger les fichiers de traduction générés par le CLI :
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`../public/_gt/${locale}.json`);
return translations.default;
}
```
**Avertissement :** Ces fichiers de traduction n’existent pas tant que vous ne les avez pas créés. Ainsi, la première exécution de `npm run dev` échoue à la compilation et la page renvoie une erreur HTTP 500. Exécutez [`npx gt generate`](/docs/cli/reference/commands/generate) (aucune clé API requise), [`npx gt translate`](/docs/cli/reference/commands/translate) (avec des identifiants), ou ajoutez des fichiers vides contenant `{}` dans `public/_gt/[locale].json`.
`withGTConfig` détecte automatiquement un fichier `loadTranslations.[js|ts]` dans votre répertoire `src/` ou à la racine du projet — aucune configuration supplémentaire n’est requise.
**Remarque :** Les traductions locales sont intégrées à votre application. Elles se chargent donc instantanément, sans dépendre de services externes. Consultez [Stocker les traductions](/docs/react/guides/storing-translations) pour plus de détails et les compromis associés.
### 5. Ajoutez le GTProvider à votre layout
Le composant **[`GTProvider`](/docs/react/reference/components/gt-provider)** donne accès aux traductions à l’ensemble de votre application. Il doit encapsuler votre application au niveau du layout racine. Conservez le reste de votre layout existant (polices, métadonnées, styles) tel quel :
```tsx title="app/layout.tsx"
import { GTProvider, useLocale } from 'gt-next'; // [!code ++]
export default function RootLayout({ children }: { children: React.ReactNode }) {
const locale = useLocale(); // [!code ++]
return (
{/* [!code --] */}
{/* [!code ++] */}
{/* [!code --] */}
{children}
{/* [!code ++:3] */}
{children}
);
}
```
### 6. Marquer le contenu à traduire
À présent, encapsulez le texte que vous souhaitez traduire avec le composant **[``](/docs/react/reference/components/t)**. [``](/docs/react/reference/components/t) signifie "traduire" :
```tsx title="app/page.tsx"
import { T } from 'gt-next'; // [!code ++]
export default function Home() {
return (
{/* [!code ++] */}
Welcome to my app
This content will be translated automatically.
{/* [!code ++] */}
);
}
```
Vous pouvez encapsuler autant ou aussi peu de JSX que vous le souhaitez dans [``](/docs/react/reference/components/t). Tout ce qui s’y trouve — texte, éléments imbriqués, même la mise en forme — est traduit comme une seule unité.
### 7. Ajouter un sélecteur de langue
Ajoutez un **[``](/docs/react/reference/components/locale-selector)** pour permettre aux utilisateurs de changer de langue :
```tsx title="app/page.tsx"
import { T } from 'gt-next'; // [!code --]
import { T, LocaleSelector } from 'gt-next'; // [!code ++]
export default function Home() {
return (
{/* [!code ++] */}