Welcome To My First Next.js Website

Like most people who work in online marketing, my go-to platform when setting up a website has always been WordPress. I decided to use my new personal blog as an excuse to try out Jamstack.

What Is Jamstack?

With a traditional website, when a web server receives a request, it has to query a database, and then build the HTML and content to deliver to the browser. This can be a slow process. With Jamstack you can utilise a technology called static site generation. This is where prebuilt static pages are already on the server and will load in an instant for any user. The advantage of this approach is faster websites that are more secure and flexible to develop.

I've dabbled in the past with the static site generator Hugo. The learning curve to build a static site in Hugo was relatively easy. The problem with my previous Hugo websites is that all the content was written in markdown within my Hugo app. Whilst this produced a super-quick website, it was a pain to manage. For this project I wanted to use a static site generator, but needed my content to be stored in a headless CMS.

Tech Stack

Static Site Generator

For static site generation I’ve chosen Next.js. Next.js is a framework used to build React applications. It comes with lots of additional features and SEO flexibility.

Headless CMS

For content management I’ve used Sanity CMS. I could have used another headless CMS such as Strapi or Contentful but Sanity seemed to have the easiest learning curve.

Hosting

Finally, the website itself is hosted on Vercel. Vercel is the company behind Next.js and provides the perfect infrastructure to host and deploy static websites.

Building The Site

Admittedly the learning curve to set up this site was tougher than I anticipated. I know my way around JavaScript but I'm by no means a JavaScript developer. This website was my first introduction to the JavaScript React framework which is in itself a challenge. ES6 JavaScript developers will definitely find it easier.

Connecting Next.js to Sanity

The next challenge was connecting the Next.js front end with the Sanity CMS backend. Through NPM you install Sanity Studio on your local machine where you can add and manage content. Sanity Studio will generate queries using the GROQ query language.

Next.js uses a built-in function called getStaticProps to fetch data from an external source when building your pages. You use getStaticProps to query your Sanity CMS and populate your statically generated pages with content.

Deploying and Hosting

Getting the website live was probably the easiest part of the process. Vercel (the company behind Next.js) provide free hosting for simple hobby websites. All you have to do is link your Vercel account with your Git repo. Then whenever you push your site to Git, Vercel will rebuild your static pages and deploy your site.

One challenge was automating the Vercel 'build' process each time I publish new content to Sanity. Otherwise I would have to manually run rebuild the website every time I changed my content. Vercel solve this by providing something called 'Deploy Hooks'. This is essentially a URL that on request will trigger a site rebuild. You generate your Vercel deploy hook, then go into your Sanity account where you can create a webhook. You configure Sanity to call your deploy hook whenever you make a content change. This will trigger Vercel to rebuild your website and pull in the freshest content.

This is a tiny website so rebuilding all pages every time I publish content isn't an issue. But for a bigger static website I would want to use the Next.js incremental static regeneration which only rebuilds specific pages as and when content changes.