demo-gatsby-contentful VS gatsby-starter-contentful-homepage

You can see my approach here (at the time I already had a Page model, so I named it Dynamic Page just for testing as an FYI). We can use React.lazy() to dynamically import and render each component based on the value of the ComponentToRender field, and pass along the content as a prop. You then set the styles/props/types/etc. for each component as you normally would.

Please check out the repo I've created with the finished files. You can use this if you get stuck and need to reference anything.

I'm using this starter. https://github.com/gatsbyjs/gatsby-starter-contentful-homepage

Now to be fair to both, if you use the starter-gatsby-blog from Contentful themselves, the new gatsby-starter-contentful-homepage from Gatsby, or the Next.js Contentful example, these do use environment variables. It's just these basic starters that do not.

The setup for the starter was very straightforward. I created a new folder in my projects directory, downloaded the starter using npx, ran the setup command, entered in my Contentful API keys, started up the local dev server, and I was up and running (more detailed steps can be found on the GitHub page, of course)!