Book Image

Elevating React Web Development with Gatsby

Book Image

Elevating React Web Development with Gatsby

Overview of this book

Gatsby is a powerful React static site generator that enables you to create lightning-fast web experiences. With the latest version of Gatsby, you can combine your static content with server-side rendered and deferred static content to create a fully rounded application. Elevating React Web Development with Gatsby provides a comprehensive introduction for anyone new to GatsbyJS and will help you get up to speed in no time. Complete with hands-on tutorials and projects, this easy-to-follow guide starts by teaching you the core concepts of GatsbyJS. You'll then discover how to build performant, accessible, and scalable websites with the GatsbyJS framework. Once you've worked through the practical projects in the book, you'll be able to build anything from a personal website to large-scale applications with authentication and make your site rise through those SEO rankings. By the end of this Gatsby development book, you'll be well-versed in every aspect of the tool's performance and accessibility and have learned how to build client websites that your users will love.
Table of Contents (18 chapters)
1
Part 1: Getting Started
7
Part 2: Going Live
12
Part 3: Advanced Concepts

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...