Speedrun Next.js
Créons rapidement une nouvelle application et internationalisons-la avec GT.
Aperçu
Dans ce guide, nous allons aborder 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 expérience avec React d'une manière ou d'une autre et que vous êtes familier avec Typescript.
Étape 1 : Créer une nouvelle application Next.js
Tout d'abord, accédez au répertoire de votre choix dans le terminal et exécutez la commande suivante :
npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dirUn assistant de configuration va apparaître, vous pouvez simplement sélectionner la valeur par défaut pour chaque option.
Étape 2 : Installez 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 --save-devÉtape 3 : Ajoutez vos variables d'environnement.
Accédez au Dashboard.
Allez sur la page Dev Api Keys dans la barre de navigation et créez une nouvelle clé 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écutez l'outil CLI
Exécutez l'outil CLI pour configurer votre base de code en vue de 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 obtenir la langue 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 : Démarrez votre application
Votre application est internationalisée ! 🎉 Testons-la !
Changeons les paramètres de langue de votre navigateur.
Démarrez votre application Next.js.
npm run devOuvrez votre application dans votre navigateur préféré (généralement à l'adresse http://localhost:3000). Si vous avez tout configuré correctement, vous devriez voir votre application dans la langue que vous avez 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 une étoile à notre dépôt GitHub gt-next.
- Configurez la prise en charge des langues de droite à gauche.
- Essayez un exemple plus avancé.
Comment trouvez-vous ce guide ?