How to handle internationalization/localization with Gatsby JS?

Question

I would like to publish my static site in various locals around the world with localized content.

How does one accomplish this?

Damselfly

Answer 1

I recently added a default Gatsby starter with features of multi-language url routes and browser language detection. (demo)

gatsby-starter-default-intl

Features:

• Localization (Multilanguage) provided by react-intl.

• Automatic redirection based on user's preferred language in browser provided by browser-lang.

• Support multi-language url routes within a single page component. That means you don't have to create separate pages such as pages/en/index.js or pages/ko/index.js.

• Based on gatsby-starter-default with least modification.

Intermolecular

This is just what I was looking for. Thanks so much! – Touchstone

Demo is not SEO optimized. Try curl gatsby-starter-default-intl.netlify.com on your terminal route change is happening on client (browser). Demo is not solving the problem. – Haste

Answer 2

There's a community plugin gatsby-plugin-i18n that you could "use […] with react-intl, i18next, or any other i18n library. This plugin do not translate messages, it just creates routes for each language, and you can use different layouts for each language if you want to." (quoting the plugin README).

Its first release is dated 30th of August 2017, so maybe you already stumbled upon it in the meantime?!

Perjure

Answer 3

fyi: there is a blog post describing step by step how to use that community plugin gatsby-plugin-i18n in combination with i18next (react-i18next)

Kassa

Actually this blog post is not describing the gatsby community plugin as they choose to use react-18next. But it is still a very good introduction to i18n – Longshoreman

Answer 4

As suggested by others, I also attempted to use gatsby-plugin-i18n. However, my case was slightly different as I was generating all the pages in gatsby-node.ts, even the index and 404 pages. Although I did make it work with the plugin specified, it doesn't automatically redirect the index page to the specified pages. I was also able to query from the headless CMS using different locales, so it was easier in gatsby-node.ts to generate all the pages separately.

Once I had all the pages, I manually created an index and a 404 page in pages directory and from their I redirected to a localized page followed by the locale in the url.

For automated navigation to browser specified language page, you can use const locale = navigator.language?.substring(0, 2) to get the locale and then redirect to specified page.

Crosscurrent