gatsby-plugin-react-intl v4.0.0

gatsby-plugin-react-intl

If can, try theme gatsby-theme-i18n, this plugin will no longer be actively maintained

gatsby-plugin-react-intl has supported gatsby v3! Please upgrade gatsby-plugin-react-intl to ^3.0.0 to use it

For gatsby v2, please use gatsby-plugin-react-intl@1.3.0

Internationalize your Gatsby site.

Fork from https://github.com/wiziple/gatsby-plugin-intl

Here are added features:

• ignoredPaths: paths that you don't want to genereate locale pages, example: "/dashboard/","/test/**", string format is from micromatch https://github.com/micromatch/micromatch
• redirectDefaultLanguageToRoot: option for use / as defaultLangauge root path. if your defaultLanguage is ko, when redirectDefaultLanguageToRoot is true, then it will not generate /ko/xxx pages, instead of /xxx
• fallbackLanguage: option to fallback to the defined language instead of the defaultLanguage if the user langauge is not in the list

The other feature just like https://github.com/wiziple/gatsby-plugin-intl

Features

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

• Support ignore paths that you don't need to generate locale pages.

Why?

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)

Starters

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

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

Showcase

• https://picpick.app
• https://www.krashna.nl (Source)
• https://vaktija.eu
• https://anhek.dev (Source)
• https://pkhctech.ineo.vn (Source)

Feel free to send us PR to add your project.

How to use

Install package

npm install --save gatsby-plugin-react-intl

Add a plugin to your gatsby-config.js

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-react-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,
      // option for use / as defaultLangauge root path. if your defaultLanguage is `ko`, when `redirectDefaultLanguageToRoot` is true, then it will not generate `/ko/xxx` pages, instead of `/xxx`
      redirectDefaultLanguageToRoot: false,
      // paths that you don't want to genereate locale pages, example: ["/dashboard/","/test/**"], string format is from micromatch https://github.com/micromatch/micromatch
      ignoredPaths: [],
      // option to fallback to the defined language instead of the `defaultLanguage` if the user langauge is not in the list
      fallbackLanguage: `en`,
    },
  },
]

You'll also need to add language JSON resources to the project.

For example,

Change your components

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

import React from "react"
import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-react-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-react-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

How It Works

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.

Plugin Options

Components

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-react-intl.

License

MIT © Daewoong Moon