Speedrun Next.js
Créons rapidement une nouvelle application et internationalisons-la avec GT.
Aperçu
Dans ce guide, nous aborderons 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à une certaine expérience avec React et que vous êtes familier avec 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
Accédez au répertoire 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 Dev API Keys dans la barre de navigation et créez une nouvelle clé d’API et un Project ID.
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 la mise en page 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 de prédilection (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 n’importe quel JSX avec le composant
<T>. - Si la traduction ne s’applique pas lorsque vous changez de langue, vérifiez les cookies de votre navigateur.
Prochaines étapes
- Ajoutez une étoile à notre dépôt GitHub gt-next.
- Configurez la prise en charge des langues écrites de droite à gauche.
Que pensez-vous de ce guide ?