Speedrun Next.js
Créons une nouvelle application en un temps record et internationalisons-la avec GT.
Présentation
Dans ce guide, nous couvrirons deux points :
- Créer une nouvelle app 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à utilisé React d’une manière ou d’une autre et que vous maîtrisez TypeScript.
Étape 1 : Créer une nouvelle application Next.js
Commencez par vous rendre dans le répertoire de votre choix dans le terminal, puis exécutez la commande suivante :
npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dirUn assistant de configuration s’affichera ; vous pouvez simplement sélectionner la valeur par défaut pour chaque option.
Étape 2 : Installer les bibliothèques
Placez-vous à la racine de votre projet Next.js et exécutez :
cd next-quickstart
npm i gt-next
npm i gtx-cliÉtape 3 : Ajoutez vos variables d’environnement.
Accédez au tableau de bord.
Ouvrez la page API Keys de développement dans la barre de navigation et créez une nouvelle clé d’API et un ID de projet.
Ajoutez‑les ensuite à votre fichier .env.
GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"Étape 4 : Exécuter l’outil CLI
Exécutez l’outil CLI pour préparer votre codebase à la traduction.
npx gtx-cli setupÉtape 5 : Modifier le layout racine
Modifiez la prop lang dans la balise <html> du fichier src/app/layout.tsx.
Elle doit utiliser await getLocale() pour récupérer la locale actuelle.
import { GTProvider, getLocale } from "gt-next";
...
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const locale = await getLocale();
return (
<html lang={locale}> // [!code highlight]
<GTProvider>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</GTProvider>
</html>
);
}Étape 6 : Lancez votre application
Votre application est prête pour l’international ! 🎉 Testons-la !
Modifiez les paramètres de langue de votre navigateur.
Lancez votre application Next.js.
npm run devOuvrez votre application dans votre navigateur préféré (généralement à l’adresse http://localhost:3000). Si tout est correctement configuré, vous devriez voir votre application dans la langue définie dans votre navigateur.
Dépannage
Notes
- Traduisez du JSX arbitraire avec le composant
<T>. - Si la traduction ne fonctionne pas lorsque vous changez de langue, vérifiez les cookies de votre navigateur.
Prochaines étapes
- Ajoutez notre dépôt GitHub gt-next à vos favoris.
- Configurez la prise en charge des langues écrites de droite à gauche.
Comment trouvez-vous ce guide ?