Home

Awesome

gatsby-plugin-i18n

Codacy Badge Build Status NPM codecov.io Dependency Status MIT license

Hi Folks!

Are you trying to build a multi language gatsby website?

We want to help you! Please open an issue for help, suggestions or bugs.

You can use this plugin 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.

How it works

Name your files with .langKey.js and the url will be /langKey/path/fileName

Examples:

fileurl
src/pages/about.en.js/en/about
src/pages/about/index.en.js/en/about
src/pages/blog/gatsby-i18n.pt.md/pt/blog/gatsby-i18n

Why?

Google! Google needs different URLs to crawl and render your pages for each language.

Showcase

Websites built with Gatsby i18n:

Feel free to add your project to the list, we would love to see what you are building!

Starters

Docs

Packages

Install

  yarn add gatsby-plugin-i18n

How to use

Include the plugin in your gatsby-config.js file.

Simple configuration example:

// Add to gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-plugin-i18n',
    options: {        
      langKeyDefault: 'en',
      useLangKeyLayout: false
    }
  }
]

Blog using markdownRemark configuration example:

// Add to gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-plugin-i18n',
    options: {        
      langKeyDefault: 'en',
      useLangKeyLayout: false,
      markdownRemark: {
        postPage: 'src/templates/blog-post.js',
        query: `
          {
            allMarkdownRemark {
              edges {
                node {
                  fields {
                    slug,
                    langKey
                  }
                }
              }
            }
          }
        `
      }
    }
  }
]

All Options

Finally

Go Gatsby!

Go Open-source!

Good luck folks! Open an issue if you need help.