# gt-next: General Translation Next.js SDK: Démarrage rapide Next.js
URL: https://generaltranslation.com/fr/docs/next.mdx
---
title: Démarrage rapide Next.js
description: Ajoutez plusieurs langues à votre application Next.js 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+)
* Node.js 18+
**Vous préférez une configuration automatique ?** Exécutez `npx gt@latest` pour tout configurer avec l’[assistant de configuration](/docs/cli/init). Ce guide présente la configuration manuelle.
***
## Étape 1 : Installez les packages
`gt-next` est la bibliothèque qui prend en charge les traductions dans votre application. `gt` est l’outil en ligne de commande 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
```
***
## Étape 2 : Configurez votre configuration Next.js
`gt-next` utilise un plugin Next.js appelé **`withGTConfig`** pour configurer l’internationalisation au moment du build. Entourez votre configuration Next.js existante avec celui-ci :
```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config';
const nextConfig = {};
export default withGTConfig(nextConfig);
```
Ce plugin lit vos paramètres de traduction et s’occupe de tout en coulisses. Aucune autre modification de votre configuration Next.js n’est nécessaire.
***
## Étape 3 : Créez un fichier de configuration de traduction
Créez un fichier **`gt.config.json`** à la racine de votre projet. Il indique à la bibliothèque les langues que vous prenez 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 vers lesquelles vous souhaitez traduire. Choisissez celles que vous voulez dans la [liste des paramètres régionaux pris en charge](/docs/platform/supported-locales).
* **`files.gt.output`** — l’emplacement où la 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, et non écrits à la main :
```txt title=".gitignore"
public/_gt/
```
***
## Étape 4 : Ajoutez GTProvider à votre layout
Le composant **`GTProvider`** permet à l’ensemble de votre application d’accéder aux traductions. Il doit envelopper votre application au niveau du layout racine :
```tsx title="app/layout.tsx"
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`GTProvider` est un **composant serveur** : il charge les traductions côté serveur et les transmet à vos composants clients.
***
## Étape 5 : Marquez le contenu à traduire
Maintenant, entourez du composant **``** tout texte que vous souhaitez traduire. `` signifie "translate" :
```tsx title="app/page.tsx"
import { T } from 'gt-next';
export default function Home() {
return (
Welcome to my app
This content will be translated automatically.
);
}
```
Vous pouvez inclure autant ou aussi peu de JSX que vous le souhaitez dans ``. Tout ce qui s’y trouve — le texte, les éléments imbriqués, même la mise en forme — est traduit comme un seul bloc.
***
## Étape 6 : Ajouter un sélecteur de langue
Ajoutez un **``** pour que les utilisateurs puissent changer de langue :
```tsx title="app/page.tsx"
import { T, LocaleSelector } from 'gt-next';
export default function Home() {
return (