# gt-next: General Translation Next.js SDK: Speedrun Next.js URL: https://generaltranslation.com/fr/docs/next/tutorials/examples/next-speedrun.mdx --- title: Speedrun Next.js description: Créons rapidement une nouvelle application et rendons-la multilingue avec GT --- ## Vue d’ensemble Dans ce guide, nous allons voir deux points : * Créer une nouvelle application Next.js * L’internationaliser avec General Translation Au total, cela devrait prendre moins de 10 minutes. ## Prérequis Nous partons du principe que vous avez déjà une certaine expérience de React et que vous connaissez TypeScript. *** ## Étape 1 : Créez une nouvelle application Next.js Commencez par vous placer, dans le terminal, dans le répertoire de votre choix, puis exécutez la commande suivante : ```bash copy npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir ``` Un assistant de configuration s’affichera ; vous pouvez simplement conserver la valeur par défaut pour chaque option. ## Étape 2 : Installez les bibliothèques Placez-vous dans le répertoire racine de votre projet Next.js et exécutez : ```bash copy cd next-quickstart npm i gt-next npm i gt ``` ## Étape 3 : Ajoutez vos variables d'environnement. Accédez au [tableau de bord](https://generaltranslation.com/en-US/signin). Dans la barre de navigation, ouvrez la page Clés d'API Dev, puis créez une nouvelle clé d'API et un ID de projet. Ajoutez-les ensuite à votre fichier `.env`. ```bash copy GT_API_KEY="YOUR_GT_API_KEY" GT_PROJECT_ID="YOUR_GT_PROJECT_ID" ``` ## Étape 4 : Exécutez l’outil CLI Exécutez l’outil CLI pour préparer votre base de code à la traduction. ```bash copy npx gt setup ``` ## Étape 5 : Modifier le layout racine Modifiez la prop `lang` dans la balise `` du fichier `src/app/layout.tsx`. Elle doit utiliser `await getLocale()` pour récupérer le paramètre régional actuel. ```javascript title="src/app/layout.tsx" copy import { GTProvider } from "gt-next"; // [!code highlight] import { getLocale } from "gt-next/server"; // [!code highlight] ... export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { const locale = await getLocale(); // [!code highlight] return ( // [!code highlight] {children} ); } ``` ## Étape 6 : Démarrez votre application Votre application est désormais internationalisée ! 🎉 Testons-la ! Changeons la langue de votre navigateur. * Changez la langue dans [Chrome](https://support.google.com/chrome/answer/173424) * Changez la langue dans [Firefox](https://support.mozilla.org/en-US/kb/use-firefox-another-language) * Changez la langue dans [Edge](https://support.microsoft.com/en-us/microsoft-edge/use-microsoft-edge-in-another-language-4da8b5e0-11ce-7ea4-81d7-4e332eec551f) Démarrez votre application Next.js. ```bash copy npm run dev ``` Ouvrez votre application dans le navigateur de votre choix (généralement à l’adresse [http://localhost:3000](http://localhost:3000)). Si tout est correctement configuré, votre application devrait s’afficher dans la langue définie dans votre navigateur. *** ## Dépannage **Cookies du navigateur** Vérifiez les cookies associés à votre application dans votre navigateur. General Translation utilise des cookies pour stocker la langue préférée de l'utilisateur. Le cookie s'appelle `generaltranslation.locale` ; il vous suffit de le supprimer. Vous le trouverez sous `localhost:3000`. Ensuite, assurez-vous simplement que la langue préférée souhaitée est bien sélectionnée, puis actualisez la page. Après cela, vous n'aurez plus besoin d'effacer les cookies. Comment vérifier les cookies : * [Chrome](https://support.google.com/chrome/answer/95647) * [Firefox](https://support.mozilla.org/en-US/kb/delete-cookies-remove-info-websites-stored) * [Safari](https://support.apple.com/en-mn/guide/safari/sfri11471/16.0/mac/11.0) * [Edge](https://support.microsoft.com/en-us/microsoft-edge/delete-cookies-in-microsoft-edge-63947406-40ac-c3b8-57b9-2a946a29ae09) *** ## Remarques * Traduisez n’importe quel JSX avec le composant ``. * Si la traduction ne fonctionne pas lorsque vous changez de langue, vérifiez les cookies de votre navigateur. ## Étapes suivantes * Mettez une étoile à notre dépôt GitHub [gt-next](https://github.com/General-Translation/gt-next). * Configurez la [prise en charge des langues s’écrivant de droite à gauche](/docs/next/guides/rtl).