Migrating to Next.js

After a long time of using Hugo, I decided to migrate my blog to Next.js. There was nothing particularly wrong with Hugo, but I wanted to try something new, and I was curious about Next.js. I also wanted to try out Tailwind CSS, which I had heard a lot about. I had a chance to use it at work, and I liked it a lot. And having a personal website is a perfect candidate for trying out new things.

For the theme, I decided to use Tailwind UI Spotlight, which is a paid theme offered as part of Tailwind UI that is a component library made with Tailwind CSS. I modified it a bit to fit my needs. And will probably continue to adjust it to my needs as I go.

Overall, I am very happy with the result. I like the way Next.js works and the theme looks fabulous. As a bonus, the project uses the same language everywhere, which is a big plus. It was a bit difficult when there were some Go-specific things while using Hugo.

Aside: React Hydration Error

While migrating I encountered this error:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Which documentation was very helpful in providing an example Invalid HTML may cause hydration mismatch such as div inside p..

Unknowingly I previously had a ul inside a p tag, which caused the error, it wasn't a valid HTML, yet it is allowed for backwards compatibility. An easy fix is to extract the ul from the p tag.

<!-- Error -->
<p>
  Text
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
</p>
<!-- No error -->
<p>
  Text
</p>
<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>

I'm quite surprised and happy that Next.js helped me to learn more about writing correct HTML markup.