Switching from Hugo to Next.js 14: Building a Blog

June 19, 2024 Program

Sharing thoughts and processes on why to ditch Hugo and choose Next.js for blog building.

Introduction

Having used Hugo to build a blog for over two years, the process including writing articles and building was quite smooth. However, after using Next.js to build an e-commerce system at work, I found Next.js to be extremely handy. So, while still familiar with it, I thought of implementing a blog.

Reasons for Ditching Hugo

🔗

The biggest advantage of using Hugo is that it doesn't require much programming skill. Just learn the basics, find a suitable theme online, and you have a basic blog functionality ready to use, which is quick and effortless. However, this means that if you want to adjust the website to your liking or add extra features, it becomes difficult. Perhaps it's due to my lack of skills or unfamiliarity with Golang syntax, haha.

The reason for the switch is simply because every time I wanted to modify the website's logic or appearance, I found it increasingly difficult to do so, haha. Moreover, Hugo only supports static websites. If you continue to operate a website, you'll always want to add various features, which is not easy with Hugo, which only generates static sites. Also, since articles are written in Markdown, if you want other effects, you need to deal with it through Shortcodes, which is quite troublesome.

Reasons for Choosing Next.js

🔗

The reason for using Next.js is because of the rich ecosystem of React, which has many packages available for faster development and implementation of various features. Next.js also supports Static Site Generation (SSG), Server-Side Rendering (SSR), and Client-Side Rendering (CSR), allowing for more functionalities while taking care of SEO. For deployment, Vercel can be used, which is easy to operate and connect to a GitHub Repository for CI/CD automatic deployment, free of charge under a certain usage, providing an excellent experience so far 👍.

Implementation Record

🔗

Since I have already used Hugo to create many articles through Markdown, this is still the most appropriate method and does not need to be changed. If you want a painless migration, you must continue to write articles in Markdown and render them through Next.js to fully transfer the original articles.

Basically, it's about replicating the basic functionalities of the original website, such as article lists, categories, tags, and multilingualism. The following articles are some records during implementation, and I will supplement more when I have time 😎:

Building a Blog with Next.js - Rendering Markdown Data

Building a Blog with Next.js - Implementing Multilingualism i18n

Conclusion

🔗

After implementing the blog with Next.js, it feels great. Besides the super-fast speed of static generation (SSG) for article pages, if you occasionally want to add some functionality, writing an API is also feasible. After all, Next.js supports APIs, and when deployed on Vercel, APIs can also run in a serverless manner, suitable for those who always want to try new features 😎.

Next.js React Web