Page 404 multilingue - Gatsby.js

Aujourd'hui, nous allons voir comment, en Gatsby.js, nous pouvons faire en sorte d'avoir une page 404 par langue. Par exemple, si nous cherchons à accéder à l'url : {votresite}.com/en/page-qui-nexiste-pas, le serveur renverra une page 404 différente de celle qu'il nous retournera si nous cherchons à accéder à l'url :
{votresite}.com/fr/page-qui-nexiste-pas

Introduction :

En Gatsby.js il est très simple de mettre en place une page 404 pour l'intégralité du site. Pour cela, il nous suffit de créer une page 404.jsx/tsx (souvent déjà générée dans les templates) dans le dossier pages.

Mais dans ce cas, cette page sera la même pour toutes les langues. Nous nous souhaitons avoir une page spécifique par langue.

Les solutions

Approche 1 : Créer une page 404 par langue et faire une redirection

Une première approche (pas la meilleure), est de créer une page 404 par langue dans le dossier pages.

Par exemple :

Nous pouvons alors réaliser une redirection vers cette page, dans la page 404.jsx, en fonction de la langue de l'utilisateur, grâce à ce code :

import { useEffect } from "react"

import { navigate } from "gatsby"

const getRedirectLanguage = () => {
  if (typeof navigator === `undefined`) {
    return "fr"
  }

  let languages = navigator.languages ?? [navigator.language]
  languages = languages.map((lang: string) => lang.toLowerCase())

  if (!languages) return "fr"

  let actualLanguage
  languages.forEach(lang => {
    if (lang.includes("fr")) {
      actualLanguage = "fr"
    } 
    if (lang.includes("en")) {
      actualLanguage = "en"
    } 
    if (lang.includes("de")) {
      actualLanguage = "de"
    } 
  })

  return actualLanguage ?? "fr"
}

const NotFoundPage = () => {
  useEffect(() => {
    const urlLang = getRedirectLanguage()

    navigate(`/${urlLang}/`, { replace: true })
  }, [])

  return null
}

export default NotFoundPage

Le problème est que l'utilisateur est redirigé, mais surtout il perd son url. Ce n'est pas un comportement souhaitable pour une page 404.

Approche 2 : Utiliser le _matchPath*_ API de Gatsby.js*

La bonne approche est d'utiliser le paramètre matchPath de Gatsby.js. En reprenant la création d'une page 404 par langue dans le dossier pages et grâce à l'API onCreatePage de Gatsby, nous pouvons, lors de leur création, modifier le matchPath des pages 404.

Et si c'est une page 404, il nous suffit de changer son matchPath par /${langCode}/*.
Ainsi, cette page sera affichée à chaque fois que le client cherche à accéder à une URL de la langue, sauf bien sûr pour les pages existantes.

Voici le code nécessaire pour réaliser cette modification de matchPath.

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage, deletePage } = actions

  if (page.path.match(/^\/[a-z]{2}\/404\/$/)) {
    const oldPage = { ...page }

    const language = page.path.split(`/`)[1]
    page.matchPath = `/${language}/*`

    deletePage(oldPage)
    createPage(page)
  }
}

Ce code modifiera donc le matchPath de toutes les pages 404 dans toutes les langues, par exemple : /fr/404, /de/404, etc.

Conclusions

Nous avons ainsi réussi à mettre en place une page 404 différente par langue grâce à l'API onCreatePage de Gatsby.js.

Cela nous permet maintenant de créer une page 404 spécifique par langue, tout en gardant l'URL erroné.

Source

Si vous le souhaitez, vous pouvez retrouver la documentation de Gatsby.js sur ce sujet ici :
https://www.gatsbyjs.com/docs/creating-prefixed-404-pages-for-different-languages/

Comments

[Lucas Lelaidier]

Exactement ce que je cherchais 🔥 Merci