More Gatsby i18n Tips And Tricks

A follow-up to my article about the internationalization of Gatsby websites.

Photo by pure julia on Unsplash

Earlier this year (2020), when I was publishing a blog post every day during the lockdown, I shared my solution to internationalize website build with Gatsby.

The past few days, I have re-build from the ground up the website of DeckDeckGo with the goals to extract static content from our editor for slides and, to develop the foundation to internationalize our platform.

At first, I was looking to experiment a new method but, did not find any which worked well for me. That’s why I developed this new website with Gatsby using my own recipe, again.

Doing so, I learned a couple of new tricks and also improved, I hope, the solution.

Meta

This article is a follow-up to my March 2020 blog post: Internationalization With Gatsby.

The current post was written in December 2020 using Gatsby v2, gatsby-plugin-i18n v1, React v17 and react-intl v5.

Its code snippets are taken from our open source website on GitHub.

JSON Translation Files

In the previous article, I was relying on JavaScript files to handle translations (i18n/en.js).

module.exports = {
  hello: "Hello world",
}

Needless to say, I was never a big fan of such method. That’s why in our new website, I replaced these by JSON data (i18n/en.json).

{
  "hello": "Hello world"
}

These JSON files can then be imported in their respective language Layout component as I used to do with JS import (layout/en.js ).

import React from 'react';
import Layout from './layout';
// Previously with JS
// import messages from '../../../assets/i18n/en';
// New with JSON
import messages from '../../i18n/en.json';

import '@formatjs/intl-pluralrules/locale-data/en';

export default (props) => (
  <Layout
    {...props}
    messages={messages}
  />
);

I did not make any changes in the common Layout component itself. It still declares the layout and wrap the children in a…