A Gatsby theme for providing localization support via Lingui. This theme sets up Lingui’s context provider so that you can access your translations on every page.


  1. Install the theme and its peerDependencies.
npm install gatsby-theme-i18n-lingui @lingui/react
  1. Add the configuration to your gatsby-config.js file:
module.exports = {
  plugins: [
      resolve: `gatsby-theme-i18n-lingui`,
      options: {
        localeDir: `./i18n/lingui`,
  1. Create a .linguirc file at the root of your project:
  "localeDir": "i18n/lingui",
  "srcPathDirs": ["src/"],
  "srcPathIgnorePatterns": ["__tests__"],
  "format": "po",
  "sorting": "origin",
  "extractBabelOptions": {
    "presets": [

You can find all options in Lingui’s documentation. Make sure that the localeDir is identical with the same option in the theme.

  1. Add three scripts to your package.jsonfile:
"scripts": {
  "add-locale": "lingui add-locale",
  "extract": "lingui extract",
  "compile": "lingui compile"


Use Lingui’s scripts to add locales, extract messages and compile those to messages.js files. The theme will leverage those compiled files, so make sure that you did those steps before using the theme.

You can also see an official example to learn more.

Theme options

Key Default Value Description
localeDir none The directory where you’ll store the Lingui files