Languages and localization

Prismic no longer recommends the gatsby-source-prismic-graphql plugin

With recent changes to Gatsby, Prismic no longer recommends the gatsby-source-prismic-graphql plugin that this documentation uses. Read more about the future of Prismic and Gatsby. We highly recommend using the gatsby-source-prismic instead. The documentation for this plugin can be found in the plugin's github README.

We will leave this documentation here for now, but will change it in the future when we determine the best approach for Prismic & Gatsby.

This article helps collect all the resources you need to take advantage of Prismic's multi-language and localization feature when building a Gatsby website.

Add languages/locales in your repo

The first step is to go to your Prismic repository and add all the languages you need in your repo's Settings. Prismic offers a robust library of language codes, but if the one you need isn't in the list, it's possible to create a custom locale.

Translation workflow

Once you have your languages configured, you can start creating documents and translations. We have a number of articles to help you learn how to navigate multiple languages, create and edit translations, and copy some or all content from one document to a translation.

Plugin configuration

Now we can focus on the Gatsby project code. You'll need to make sure your configuration is setup for multiple languages in your gatsby-config.js file. This is explained in a couple of different places: The Prismic Gatsby source plugin and Query by language.

Query by Language

With the language configuration in place, you can learn how to query/filter data by language as well as how to retrieve the alternate language data for a given document.

Render the alternate languages

When rendering your pages in your Gatsby website, you'll likely want your users to be able to switch between languages. Here's an article that explains how to create a language switcher on your pages.

Full example project

Want to see a full, working project in action? Feel free to check out our multi-language website example project with Gatsby.js.