In this tutorial, you will learn how to create a Gatsby-powered website and then create a page that returns data from Contentful CMS. The aim of this guide is to be a complete end-to-end walkthrough that will cover everything you need to get going.

On the 1st of February 2023, Netlify shocked the development world by purchasing Gatsy. As Netlify is the most used Javascript hosting platform, does this signal a potential dethroning of the current champ NextJs? Assuming Netlify will start to focus on more Gatsby friendly-features this might be the perfect time to give Gatsby a trial. If you have 10-20 minutes spare and you want to learn how to become a Gatsby, Contentful, Netlify ninja, read on 🔥🔥🔥

As we have a lot to cover in this tutorial, I skip the basic introduction to Contentful, Netlify, and Gatsby. I assume you have picked your tech and you have some solid reasons for doing that. The good news is that the Gatsby integration steps described in this section should feel very similar to anyone who has integrated Contentful previously.

The simplest way to create a Gatsby project is to make use of its CLI tool. You can install this CLI tool using this command:

With the CLI tool installed, you can then create a new Gatsby site using the CLI tool. The convention to install a new Gatsby starter through the CLI follow this convention:

If you leave the STARTER_URL part empty the installer will use the default starter kit files instead. Assuming I wanted to create a project called my-gatsby-site, I could just use this command:

In order to connect Gatsby and Contentful together there is an external NPM package that you can make use of called gatsby-source-contentful. You can install this package using this command:

In order for your code to be able to successfully request content from the CMS, you will need to provide the Contentful/Gatsby plugin with the Contentful space ID that you want to connect to and its corresponding accessToken/API key. If you are still unsure about how to access these tokens, see the previous section about NextJs for more information.

The difference in Gatsby compared to NextJS is that you will need to add these variables within the plugin config rather than an environment variable. To add this config within gatsby‐config.js, add some config that looks like this:

The nice thing about adding these settings to the Gatsby plug-in config file is that you can then use the plugin to query contentful within your code and it will just magically work. The final code to cover is the code to make that call within one of your Gatsby components. This code could look something like this:

These are the four steps that are required in order to get some content to render from Contentful within a Gatsby project. Granted, this overview is not a complete guide. I have missed a few important steps from this overview, like metadata, preview, links, and responsive images.

To be clear, the intention of these steps was to highlight that implementing certain things within Gatsby is not a million miles from the steps required to implement these things in any framework. The aim of this section was to highlight just how similar the steps actually are.

I hope you can now appreciate that you can implement the same types of features a NextJS and Contentful integration provide within React, Vue, Angular, and Gatsby. In most cases it's the syntax that is slightly different, however, it's the same fundamental steps to render your CMS content regardless of framework.

For people trying to implement Contentful in another platform, I'm hoping that by showing you how similar the processes can be you can more easily go out and figure out the exact steps you need to implement. Often, you can find a guide on NextJs and then convert the steps into the framework of your choice. This is a practice I have used a lot whenever I've needed to implement Contentful with something new for the first time.

One thing to note is that depending on the framework you are using will influence the types of packages that you might want to install. For example, if you want to get a multi-language website working with Contentful and Gatsby, you would make use of gatsby‐plugin‐intl. As this package is not available within NextJs you would need to find its equivalent.

Happy Coding 🤘