kalinchernev / using-i18n

Using https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n
MIT License
24 stars 4 forks source link

Building a multilingual Gatsby site

This repo is a copy of an official example approach combining few suggestions. Refections are documented into this article about Gatsby i18n.

Using i18n

https://using-i18n.netlify.com/

Example site that demonstrates how to build Gatsby sites with multiple languages (Internationalization / i18n) without any third-party plugins or packages. Per language a dedicated page is built (so no client-side translations) which is among other things important for SEO.

The general information are defined in config/i18n.js, the translations are located in config/translations. The custom hook useTranslations pulls in these translations then (when the former is changed, the latter needs to update its GraphQL query). Due to the usage of a global layout/Context API and the passed locale to all pages (see gatsby-node.js) you know on every page which language is currently displayed. Moreover, with the usage of MDX and gatsby-mdx a custom component for the <a> tag is implemented -- this way links can stay the same for every language, without the need to manually write path prefixes.

Opinionated choices that were made: