Providing locale translations for single-instance pages

For static pages, we will need a different approach to providing translations. For any strings that require translation we can no longer have the values in line with our JSX. A very common approach is to use react-i18next, which has a great hook called useTranslation that allows you to switch strings out depending on the locale. Let's use this now to translate content on our index page for site visitors:

1. Open a terminal at your root directory and add these new dependencies:

   npm install gatsby-theme-i18n-react-i18next react-
   i18next i18next

   Here, we are installing the gatsby-theme-i18n-react-i18next package and its dependencies. This package is a Gatsby theme plugin that provides locale support to our application by wrapping our site in react-i18next's context provider. Underneath the hood, this package wraps the site by using wrapPageElement in the gatsby-browser.js in the same way we did in Chapter 12, Using Real...