Building a website with Next.js and Contentful

I decided to build my new website with Next.js using Contentul as a headless CMS. In this post I go over the process and the features that I have implemented.

What is a headless CMS?

A headless CMS only exposes an API, compared to traditional CMS systems that manage everything to rendering the final HTML. This means that a programmer can use the headless CMS for content management, while implementing a frontend in any language. I decided to build my personal website with Contentful as I have had good experience with it from other projects.

Content Types

Contentful gives you the flexibility of creating your own content types that can have relations and be embedded in text. For example, I created a couple of embeddable types for content that text editors normally don't support well. These types are sometimes called slices. Below you can see examples of an image slice, a code slice and a link slice.

Here is an example of an image slice, you can click on the images to enlarge them.

Why use Next.js?

I decided to use Next.js for the frontend as you can get fast page loads and a smooth user experience with it. With Next.js, the initial page load is rendered by the server, however on page transitions, only the minimum data needed is requested from the server. Next.js is also based on React so frontend development is based on reusable components, a good developer experience in my opinion.

Writing about code

As a software developer, I might want to write about software from time to time. Therefore it is important for me to have good support for embedding code blocks. Here is an example of a python snippet.

import time

items = ["hello", "world", "contentful", "next.js"]

for item in items:
    print(item)
    time.sleep(1)

Same goes for command line snippets.

$ docker run hello-world

I am sure I will make use of this in my future blog posts, if I ever write any.

Links

Sometimes you want to make some external resources stand out. That's why I made a link slice, as seen here.

These are all the slices I have for now. If I ever feel that I don't have a good way to present some content, I can always add more slice types.

Conclusion

Next.js and Contentful is a creat combination for creating clean and fast websites where customization is wanted.