-
Book Overview & Buying
-
Table Of Contents
Elevating React Web Development with Gatsby
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:
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...