i18n with Gatsby

The article argues that Gatsby i18n works best when each locale gets its own page copy, so content is rendered statically instead of waiting for JavaScript. It then shows how to pass the locale through page context and use that value in layouts, links, and content loading.

Reading notes

#

• Create one page per locale, keeping the default language out of the URL path and duplicating pages for other languages
• Store the locale in page context so page components can read it during rendering
• With React-Intl, use a Layout component to provide the locale and feed the provider with locale-specific strings
• Wrap Gatsby Link so navigation keeps the current locale instead of always falling back to the default language
• Without external dependencies, load locale JSON files and map them by locale in the page component
• Use Gatsby source and transformer plugins to query localized JSON content through GraphQL
• Page context can be used as a GraphQL query variable to filter results per locale
• Gatsby data layer can also support different images per language with gatsby-image
• A localized link can be built with React Context and a consumer in the layout setup