Speedrun Next.js

Faisons un speedrun pour créer une nouvelle application et l'internationaliser avec GT.

Aperçu

Dans ce guide, nous aborderons deux choses :

Créer une nouvelle application Next.js
L'internationaliser avec la traduction générale

Au total, cela devrait prendre moins de 10 minutes.

Prérequis

Nous supposons que vous avez soit de l'expérience avec React dans une certaine mesure, soit que vous êtes familier avec Typescript.

Étape 1 : Créer une nouvelle application Next.js

Tout d'abord, naviguez vers le 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-dir

Un assistant de configuration apparaîtra, 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 --save-dev

Étape 3 : Ajoutez vos variables d'environnement.

Accédez au Tableau de bord. Allez à la page Dev Api Keys dans la barre de navigation et créez une nouvelle clé API et un ID de projet. Ensuite, ajoutez-les à 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 configurer votre base de code pour la traduction.

npx gtx-cli setup

Étape 5 : Modifier la mise en page racine

Modifiez la prop lang dans la balise <html> dans le fichier src/app/layout.tsx.

Il devrait utiliser await getLocale() pour obtenir la locale actuelle.

src/app/layout.tsx

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.

Changez votre langue dans Chrome
Changez votre langue dans Firefox
Changez votre langue dans Edge

Démarrez votre application Next.js.

npm run dev

Ouvrez votre application dans votre navigateur préféré (généralement à 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 le 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 le support des langues de droite à gauche.
Essayez un exemple plus avancé.

Speedrun Next.js

La langue de mon application ne change pas, même si j'ai changé la langue de mon navigateur.

Sur cette page