I wanted to set myself a challenge of hosting my new blog site built with Next JS for free.

Next JS

Next JS is a hybrid static & server rendering framework built in React. I'm a big fan of Next JS. Its ability to mix static and hybrid is really cool. Having had a lot of experience in Gatsby which is more of a truly static site generator, its incremental static regeneration allows pages to re-built on the fly when a page receives a request based on a revalidate timestamp. This means fewer 'full builds' to occur in order to update content on our static site which means a more up-to-date site with all the benefits of performance of a statically generated website. Having that power plus the ability to server-side render content for specific routes makes Next JS a powerful tool.

Content management system

I wanted to use a GraphQL backend for serving my blog content. I have used Silverstripe and have heard of Contentful, but something that has piqued my interest is Strapi. It's a node-based headless CMS that allows you to easily define your content types via a content builder in the CMS.

Setting a simple blog with content types was really easy. Essentially you define types like pages and articles (blog posts) and the fields that would exist on them. For an article, you have a title, content, published date etc. Strapi then scaffolds out the CMS fields you'd use for these data fields. Then exposing these fields over GraphQL is a simple step. Once we are at this step we are ready for building our site.

Hosting for our CMS and front-end

So we have a front-end, Next JS, and a CMS backend for our content. This setup is what is called a headless CMS, and is becoming a common way for building content managed websites.

Since we have two codebases, we need two hosting providers

Heroku

Heroku is a PaaS, a platform as a service, which is a great option for simple deployment and hosting of our Strapi CMS. Strapi even has a simple process to launch a site.

Vercel

Vercel is a platform for front-end frameworks. Vercel is built for Next JS, however it also great for hosting over frameworks like Gatsby.

Setting up Next JS on Vercel is super easy. It also has a free tier which is exactly what we want.

Summary

Next JS and Strapi are a great combination for building your next website. I'd recommend using Heroku and Vercel if you decide to go that way. Both were super easy to set up and to deploy updates to.