Site multilingues avec Gatsby

By admin, 11 septembre, 2020

Vous avez essayé de créer un site Web Gatsby multilingue?

Dans cet article, on va vous présenter les packages nécessaires pour avoir un site multilingue.

gatsby-plugin-i18n :

Ce plugin vous aide à utiliser react-intl, i18next ou une autre bibliothèque i18n avec Gatsby. Ce plugin ne peut traduire, formater votre contenu, mais permet de créé plutôt des ‘routes’ pour chaque langue, cela pourrait aider Google de trouver plus facilement la version correcte de votre site.

Le format de dénomination suit .codelanguage.js > pour les fichiers et /codelanguage/chemin/nomfichier > pour les URL

Exemple :

File: src/pages/about.en.js
URL: /en/about

gatsby-plugin-i18n sur GitHub

- Installation

yarn add gatsby-plugin-i18n

- Utilisation

Ajouter le plugin dans votre fichier gatsby-config.js,

Exemple de configuration simple :

// Ajouter dans gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-plugin-i18n',
    options: {
      langKeyDefault: 'en',
      useLangKeyLayout: false,
    },
  },
]

react-intl :

React-intl fait partie de l'ensemble FormatJS de bibliothèques i18n et prend en charge plus de 150 langues. Il s'appuie sur l'API d'internationalisation de JavaScript, fournissant des API et des composants améliorés.

React-intl fournit des traductions permettant de charger dynamiquement des modules de langage selon vos besoins. Il existe également des options de polyfill disponibles pour les navigateurs plus anciens, qui ne prennent pas en charge l'API
JavaScript i18n de base.

Des informations plus détaillées sur les API et les composants de react-intl, y compris les démos, sont disponibles dans la documentation.

Blog image