Internationalize your Gatsby site.

• Turn your gatsby site into an internationalization-framework out of the box powered by react-intl.

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

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

When you build multilingual sites, Google recommends using different URLs for each language version of a page rather than using cookies or browser settings to adjust the content language on the page. (read more)

Demo: http://gatsby-starter-default-intl.netlify.com

Source: https://github.com/wiziple/gatsby-plugin-intl/tree/master/examples/gatsby-starter-default-intl

• https://picpick.app
• https://www.krashna.nl (Source)
• https://vaktija.eu
• https://anhek.dev (Source)
• https://pkhctech.ineo.vn (Source)
• https://www.neonlaw.com (Source)
• https://ethereum.org (Source)
• https://marscollective.co (Source)

Feel free to send us PR to add your project.

npm install --save gatsby-plugin-intl

// In your gatsby-config.js
plugins: [
 {
 resolve: `gatsby-plugin-intl`,
 options: {
 // language JSON resource path
 path: `${__dirname}/src/intl`,
 // supported language
 languages: [`en`, `ko`, `de`],
 // language file path
 defaultLanguage: `ko`,
 // option to redirect to `/ko` when connecting `/`
 redirect: true,
 },
 },
]

For example,

You can use injectIntl HOC on any react components including page components.

import React from "react"
import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"
const IndexPage = ({ intl }) => {
 return (
 <Layout>
 <SEO
 title={intl.formatMessage({ id: "title" })}
 />
 <Link to="/page-2/">
 {intl.formatMessage({ id: "go_page2" })}
 {/* OR <FormattedMessage id="go_page2" /> */}
 </Link>
 </Layout>
 )
}
export default injectIntl(IndexPage)

Or you can use the new useIntl hook.

import React from "react"
import { useIntl, Link, FormattedMessage } from "gatsby-plugin-intl"
const IndexPage = () => {
 const intl = useIntl()
 return (
 <Layout>
 <SEO
 title={intl.formatMessage({ id: "title" })}
 />
 <Link to="/page-2/">
 {intl.formatMessage({ id: "go_page2" })}
 {/* OR <FormattedMessage id="go_page2" /> */}
 </Link>
 </Layout>
 )
}
export default IndexPage

Let's say you have two pages (index.js and page-2.js) in your pages directory. The plugin will create static pages for every language.

Default Pages and Redirection

If redirect option is true, / or /page-2 will be redirected to the user's preferred language router. e.g) /ko or /ko/page-2. Otherwise, the pages will render defaultLangugage language. You can also specify additional component to be rendered on redirection page by adding redirectComponent option.

To make it easy to handle i18n with multi-language url routes, the plugin provides several components.

To use it, simply import it from gatsby-plugin-intl.

MIT © Daewoong Moon