Implementing routes for internationalization

A common approach for large sites to accommodate localization is to prefix all paths with a language code. Let's take our about page, for example – the English (and default) language version of the page is located at /about but the French version of the page might be located at /fr/about and the German version of it at /de/about.

Let's implement this pattern now for our default language of English and add French as a secondary language. We can make this easy with the help of gatsby-theme-i18n:

1. Install the new dependencies:

   npm install gatsby-theme-i18n gatsby-plugin-react-
   helmet react-helmet

   Here we are installing the gatsby-theme-i18n package and its dependencies. This package automatically creates the route prefixes for us. It also adds language and alternate tags to the head of document. This helps Google identify that two pages contain the same content in different languages.

   Important Note

   This theme uses react...