Rebuilding my website with NextJS, Chakra UI and Airtable

Slug

Published

Excerpt

Featured

Publish date

Last edited time

Created time

Show banner

Video link

Formula

The Christmas holidays are always a time for me to work on fun projects. This time I updated my website and gave it a fresh coating. You see the end result right here and you can explore the code on Github. My goal was to make the website simpler, better for blogging and implement three directory sides for people to explore:

Books: Shows my last read books + a personal rating

Tools: Tools and apps that I use on a regular basis

Bookmarks: My favourite bookmarks, open for everyone

The new setup

The last version was running on Gatsby and TailwindCSS. For the rebuild, I chose to go with NextJS and ChakraUI.

Next is in many ways very similar to Gatsby, but I like how they offer the ability to choose between different data fetching methods. This makes it possible to build dynamic app-like features that normally aren’t possible for a static site.

I believe Chakra UI is highly underrated and extremely powerful. It offers the same functional properties as TailwindCSS to build components at pace and comes with more or less the same design language.

But on top of this, you got a lot more packed into Chakra UI. To name a few things that:

Components for popups, drawers and modules

Build-in accessibility features

Plug & play transitions powered by Framer Motion

Things like Chakra Factory

A ton of components that save hours of work

Looking back I’m really happy that I made the switch and feel quite comfortable that this setup will last me a couple of years.

Using Airtable as a CMS

Airtable is a tool to create and manage relational databases. Many people use Airtable for complex project management and to organise their business. But Airtable also offers an API, that makes it easy to read and write data to your bases.

If you ask me, then Airtable and NextJS are a match made in heaven. Airtable is easy to setup up and provides a clean, yet powerful interface to deal with different data types (e.g images, rich text, ratings). Check the base below to see an example of my Books database inside Airtable.

Then inside NextJS, you can fetch that data in the build process by using getStaticProps() and serve this as a static page over Vercel.

That is already cool, but you can take it a step further. Inside getStaticProps() you can set the revalidate option to tell NextJS how often it should check the API for new data. If NextJS finds new data it will automatically trigger a new deploy and update the site. How cool is that!?

With this approach, I’ve built the /tools and /books pages on my website.

Credits

NextJS has been new ground for me, so I looked around how other people build their own websites. In this process the personal websites from Lee Robinson and Brian Lovin have been the biggest insipiration. I’ve learned a lot about NextJS by just going through the code of those two sites and filling the gaps by reading the NextJS docs.