Support multilingue avec GatsbyJs

gatsby-plugin-intl

Vous voulez créer un site multilangue ou ajouter le support multilangue à votre site déjà existant?

Google recommande d'utiliser différents url pour chaque langue des pages de votre site, plutot que d'utiliser les cookies ou autres parametres pour ajuster le multilangue.

GatsbyJs met à disposition un plugin répondant à ce besoin: gatsby-plugin-intl

Ce plugin fondé sur FormatJs va se charger pour vous de créer les pages et les chemins à partir de fichiers JSON.

L'approche pour vous se découpe en 4 étapes:

Installation du plugin

Pour commencer, installez le plugin dans votre projet gatsby:

> npm install gatsby-plugin-intl

Puis ajoutez le plugin dans le fichier gatsby-config.js:

{
  resolve: `gatsby-plugin-intl`,
  options: {
    // le chemin d'accès des fichiers JSON
    path: `${__dirname}/src/intl`,
    // les langages supportés
    languages: [`fr`, `en`, `es`],
    // path du langage par défaut
    defaultLanguage: `fr`,
    // option pour rediriger `/fr` lors de la connection `/`
    redirect: false,
  },
},

Il vous faut par la suite ajouter les fichiers JSON dans un dossier intl.

├── node_modules
├── src
│   ├── components
│   ├── pages
│   └── intl
│       ├── fr.json
│       ├── en.json
│       └── es.json
├── static
├── gatsby-config.js
├── package.json
└── README.md

fr.json:

{
  "title": "Gatsby Fr",
  "link": "Aller à page2",
  "content": {
    "intro": "Introduction a gatsby-plugin-intl"
  }
}

Stucturation des pages et composants

Ensuite injectez votre contenu dans les pages et composants dans lesquels vous voulez disposer du plugin.

Structure:

import { injectIntl } from "gatsby-plugin-intl"

const IndexPage = ({ intl }) => {
  return <div>Salut</div>
}

export default injectIntl(IndexPage)

Utilisation du hook:

import { useIntl } from "gatsby-plugin-intl"

const IndexPage = () => {
  const intl = useIntl()
  return <div>Salut</div>
}
export default IndexPage

A noter que si vous utilisez l'api Link de gatsby, l'objet Link doit être importé depuis gatsby-plugin-intl

import { injectIntl, Link } from "gatsby-plugin-intl"

Intégration du contenu

Pour intégrer votre contenu, vous pouvez procéder de 2 manières:

<FormattedMessage id="title" />

{intl.formatMessage({ id: "title" })}

import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

const IndexPage = ({ intl }) => {
  return (
    <Layout>
      <SEO title={intl.formatMessage({ id: "title" })} />
      <div className="content">
        {intl.formatMessage({ id: "content.intro" })}
        {/* OU <FormattedMessage id="content.intro" /> */}
      </div>
      <Link to="/page-2/">
        {intl.formatMessage({ id: "link" })}
        {/* OU <FormattedMessage id="link" /> */}
      </Link>
    </Layout>
  )
}
export default injectIntl(IndexPage)

Une suppression du cache est nécessaire entre chaques édits des JSON.

GatsbyJs propose une commande pour cela:

> gatsby clean

Configurer la navigation

A vous d'adapter le switch des différents languages selon vos besoins.

Pour cela importer l'objet changelocale:

import { changeLocale, injectIntl } from "gatsby-plugin-intl"

intl.locale

Vous permet d'accéder au chemin du language actuel (/fr/, /en/...)

changeLocale()

Vous permet de changer le langage

Voici un exemple:

import { IntlContextConsumer, changeLocale } from "gatsby-plugin-intl"

const Language = ({ intl })) => {
  console.log(intl.locale)
  return (
    <div>
      <a onClick={() => changeLocale("en")}>
        Changer la langue en Anglais
      </a>
    </div>
  )
}

export default  injectIntl(Language)

Ce plugin s'avère être une solution intéressante pour des sites de petites envergure, voir pour un couplage avec une solution cms en markdowns.

Pour du multilangue avec une gestion de contenu plus complète, peut-être alors se tourner vers une solution CMS qui propose une prise en charge du multilangue intégrée.(Prismic, DatoCMS)