Démarrage rapide Next.js

Aperçu

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

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

Nous couvrirons 4 étapes simples :

Ce processus entier devrait prendre moins de 5 minutes.

Configuration

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 locale.

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>

Encapsulez tout contenu JSX imbriqué dans le composant <T> pour le rendre traduisible. Pour plus d'informations, consultez le guide sur l'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>  
  );
}

npx gtx-cli setup

Pour les chaînes de caractères, vous pouvez utiliser useGT() ou getGT() pour la traduction. Pour plus d'informations, consultez ce guide.

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"

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

Expédition en Production

Suivez notre guide sur l'expédition 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>.
• Apprenez comment améliorer le SEO avec le routage i18n (ajout de routes pour chaque locale, par exemple example.com/en, example.com/fr)
• Miroitez votre application pour prendre en charge les langues de droite à gauche telles que l'arabe et l'hébreu.
• Créez une liste de langues approuvées pour votre application avec le plugin Next.js.