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 couvrirons 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 langue différente

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 autres composants disponibles.
• Améliorez votre contenu avec les composants <Num>, <Currency>, <Branch>, et <Plural>.
• Apprenez à améliorer le référencement avec le routage i18n (ajout de routes pour chaque locale, par ex. 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 comme 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 pour le portugais et l'espagnol
});

3. Ajouter le composant <T>

Enveloppez 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>
        Ceci est traduit.
      </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>
        Ceci est traduit. <Var>Ceci ne l'est pas.</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(); // côté client
  const t = await getGT(); // côté serveur
  return (
    <p>
      {t("Ceci est traduit.")}
    </p>
  );
}

4. Ajouter vos variables d'environnement

Ajoutez votre clé API et votre ID de projet à votre environnement local.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"