Démarrage rapide avec Next.js

Aperçu

Ce guide décrit comment internationaliser un projet Next.js existant qui utilise le App Router.

Pour un projet utilisant le Pages Router, suivez la documentation React.

Nous allons couvrir 3 étapes simples :

Configuration

1. Exécution de l'assistant de configuration

L'assistant de configuration vous guidera tout au long du processus d'internationalisation de votre projet.

npx gtx-cli@latest init

Pour configurer votre projet manuellement, suivez le guide de configuration manuelle.

L'assistant de configuration va :

1. Installer les bibliothèques requises.
2. Configurer les locales prises en charge par votre projet.
3. Envelopper les composants JSX de votre projet avec le composant <T>.
4. Ajouter withGTConfig() à votre fichier next.config.js.
5. Générer une clé API de production et un ID de projet pour votre projet.

Consultez la documentation de l'assistant de configuration pour plus d'informations.

2. Ajout des variables d'environnement

L'assistant de configuration créera un fichier .env.local à la racine de votre projet contenant votre clé API de production et l'ID de projet.

Cependant, afin d'utiliser gt-next en mode développement, vous devrez ajouter une clé API de développement à la place d'une clé de production.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

3. Nettoyage des chaînes de caractères

L'assistant de configuration enveloppera tous les composants JSX de votre projet avec le composant <T>. Cependant, vous pouvez remarquer que les chaînes de caractères ne sont pas modifiées.

Par exemple, si vous avez une constante de chaîne comme ceci :

export default function Example() {
  const greeting = "Hello, world!";
  return <p>{greeting}</p>;
}

L'assistant de configuration ne modifiera pas cette chaîne.

Pour corriger cela, vous pouvez utiliser le hook useGT() et la fonction getGT() pour traduire la chaîne.

import { useGT } from "gt-next/client";
export default function Example() {
  const t = useGT();
  return <p>{t("Hello, world!")}</p>;
}

Essayons-le !

Félicitations ! 🥳 Votre application est maintenant multilingue ! Voyons-la en action.

Voir votre application dans une autre langue

npm run dev 

Dépannage

Déploiement en Production

Suivez notre guide sur le déploiement en production.

Prochaines étapes

• Consultez notre référence API Next.js pour des informations détaillées sur le composant <T> et les autres composants disponibles.
• Améliorez votre contenu avec les composants <Num>, <Currency>, <Branch> et <Plural>.
• Découvrez comment améliorer le SEO avec le routing i18n (ajout de routes pour chaque langue, par exemple example.com/en, example.com/fr) et la génération de site statique.
• Adaptez votre application pour prendre en charge les langues de droite à gauche telles que l'arabe et l'hébreu.

Configuration manuelle

Si vous préférez effectuer la configuration manuellement, suivez les étapes ci-dessous.

1. Installer les bibliothèques

Installez les bibliothèques gt-next et gtx-cli.

npm i gt-next
npm i gtx-cli --save-dev

2. Ajouter le plugin withGTConfig()

Ajoutez withGTConfig() à votre fichier next.config.js. Vous pouvez spécifier les langues que vous souhaitez prendre en charge en passant un tableau de codes de langue.

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  locales: ['pt', 'es'], // Support for Portuguese and Spanish
});

3. Ajouter le composant <T>

Encapsulez tout contenu JSX imbriqué dans le composant <T> pour le rendre traduisible. Pour plus d'informations, consultez le guide d'utilisation des composants <T>.

import { T } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        This gets translated.
      </p>
    </T>  
  );
}

Utilisez le composant <Var> pour désigner le contenu JSX qui ne doit pas être traduit.

import { T, Var } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        This gets translated. <Var>This does not.</Var>
      </p>
    </T>  
  );
}

Pour les chaînes de caractères, vous pouvez utiliser useGT() ou getGT() pour la traduction.

import { useGT } from "gt-next/client";
import { getGT } from "gt-next/server";
 
export default function Example() {
  const t = useGT(); // client side
  const t = await getGT(); // server side
  return (
    <p>
      {t("This gets translated.")}
    </p>
  );
}

4. Ajouter vos variables d'environnement

Ajoutez votre clé API et l'identifiant du projet à votre environnement local.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"