Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to handle internationalization/localization with Gatsby JS?

Tags:

gatsby

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

How does one accomplish this?

like image 483
thomfoolery Avatar asked Aug 03 '17 16:08

thomfoolery


People also ask

What is I18N localization?

Internationalization (sometimes shortened to "I18N , meaning "I - eighteen letters -N") is the process of planning and implementing products and services so that they can easily be adapted to specific local languages and cultures, a process called localization .

What is I18N Javascript?

Functions to internationalize your extension. You can use these APIs to get localized strings from locale files packaged with your extension, find out the browser's current language, and find out the value of its Accept-Language header. See the Internationalization page for a guide on using this API.

What is localization in frontend?

Localization, or l10n, is the process of adding support for a specific region, country, or language. This is different from translating text into another language, though localization can include translation.

What is Gatsby plugin?

Gatsby's plugin layer includes a wide variety of common website functionality that you can drop in to your website. There are many types of Gatsby plugins, including: Integrations, or “source plugins”. These plugins pull data into Gatsby's GraphQL layer and make it available to query from your React components.


2 Answers

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.

like image 120
Daewoong Moon Avatar answered Oct 21 '22 17:10

Daewoong Moon


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?!

like image 20
fk_ Avatar answered Oct 21 '22 17:10

fk_