페이지 404 다국어 - 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, sinous 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 sinous cherchons à accéder à l 'URL :
{votresite}.com/fr/page-qui-nexiste-pas

소개 :

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 페이지.

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

레 솔루션

Approche 1: Créer une 페이지 404 par langue et faire une 리디렉션

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

파 예:


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 404페이지.

접근법 2: Gatsby.js*의 _matchPath*_ API 활용자

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 creation, modifier le matchPath des pages 404.

기타 페이지 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.

음성 코드는 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 코드 수정자 donc le matchPath de toutes les pages 404 dans toutes les langues, par example:/fr/404,/de/404 등.

결론

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

원천

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/