Building personal blog with Next.js

Recently I was trying to figure out what my page should look like. Should it have a blog? Should I use some of the popular blogging platforms? I tried everything. I liked Hashnode as it offers great tools, support for custom domains, and other cool features. But in the end, I was not happy with the result. I need more customizations, I need more freedom.

I tried building it on my own with Spring Boot and Hotwire. I like this stack and agree with the philosophy of Hotwire. Unfortunately, to do this in the scope I would like it would take a lot of time and as a father, I do not have that much time on my hands.

I know that Next.JS is pretty popular and for some work reasons I was looking into it. I came across their how to start tutorial and in the scope of this tutorial (took me about 4 hours), you will build a skeleton blog. I was surprised how easy and fast it was. Then I decided I will take this code and finish the job. In the scope of few evenings, I had the new version of my site built and deployed to production.

Tutorial

I never saw a tutorial that is this polished. It was a joy to use and I was feeling like I am moving ahead with the speed of light. The tutorial will go over the most important parts of creating a basic blog. You do not need to be that familiar with React to get the concepts. You just need basic knowledge of JavaScript. I would recommend everybody go through that tutorial even if only to see how to make proper tutorials.

Styling

I am not good with CSS. I consider it one of my weaknesses. It always seems like there is tons of way to do the one thing you need, it's never clear and it's magic to me. I was hearing tons of good vibes about TailwindCSS so I decided to try that. You know since I am on this hype wave of trying new stuff. There I was not that lucky. It seems horrible. It just takes all the horrible parts of CSS and moves to a different level. There is no good tutorial. It seems like a complete mess. Maybe I was using it wrong but it seemed I would need to write tons of custom CSS anyway.

I decided to go the easiest way and just do the whole thing in pure CSS. No frameworks, no nothing. In the end, I am quite happy with the result, but it's a perfect CSS code. I would say it's CSS spaghetti.

Other functionality

For now, I decided to add few features that are not covered by the tutorial.

One is the Contact Me form. I found a great tutorial. With it was easy to do.

One small note here. I spent way too much time trying to figure out why the API response was not submitted. Instead of:

res.status(200)

you need to do:

res.status(200).end()

Second one is code highlting in the blog posts. For that I decided to Prism.js library. Here is a code snippet that enables it for you.

const prism = require("prismjs")
require('prismjs/components/prism-java');
require('prismjs/components/prism-typescript'); // add more if you need

useEffect(() => {
 if (typeof window !== 'undefined') {
 prism.highlightAll();
 }
}, []);

Vercel hosting

The biggest positive surprise for me was the Vercel hosting. It's part of the tutorial as well and it's super easy and super intuitive. You just give them your git repo, they will do the rest of you. Your API endpoints are deployed as serverless functions, everything that should be served from CDN is automatically served from CDN. Adding a custom domain was just a few clicks away.

It works like magic.

Summary

I am sold on Next.JS. If I would be starting my startup I would go for it. It's super easy and yet very powerful. I would host on Vercel.

For CSS I would probably go for Bootstrap and it still seems the easiest one to use for me.