Why another rewrite?
The last time I rewrote my website in 2020 (see Rewriting mobeigi.com with React) I transitioned from a PHP website to a React website. However, I did not change the overall aesthetics of the websites at all. The problem with this website was that it was separated into two main components, a static React front end and a dynamic WordPress blog. I styled the two components with similar themes, but you could always tell the two websites were glued together.
There were also other reasons I was unhappy with the website:
- SEO was poor for my SPA-style static website due to meta tags being loaded post-hydration on the JavaScript side.
- The bundle size for the SPA website was rather large and served for all requests.
- No true 404 responses (only soft 404 pages).
- WordPress theme was outdated and not responsive!
- Restrictions on easily customising static pages within WordPress.
- WordPress load times were a little slow.
It was clear that a full rewrite would be needed to address these issues.
Next.js
I decided to use Next.js to power my new website. Next.js would allow me to utilise server side rendering and address my SEO concerns. I would also achieve much lower bundle sizes for each request. I can also serve true 404 responses now.
This was my first time using Next.js as a framework and overall the experience was good. The landscape can be quite confusing at times and I thought some solutions to very common problems were convoluted. However, the framework is feature packed with a lot of documentation and community support. I was able to solve any issues I ran into fairly quickly.
Payload CMS
As I was migrating away from WordPress CMS, I needed a headless CMS I could use to power the blog functionality on my website. I researched and demo'd around 9 different headless CMS solutions before selecting Payload CMS as my preferred headless CMS.
I picked Payload CMS for a few reasons:
- It's lightweight.
- The performance is fast.
- It's extremely customisable.
- It has a great team behind it and strong community support.
- It had a demo that performed the best and was the most intuitive.
I am very happy with my decision to use Payload CMS. There is a learning curve at the beginning but once you get familiar with the code base, it's very easy to customise and organise the CMS for your needs.
In particular, Payload CMS had a good Rich Text solution that was a core requirement for my blog. You can see what Payload CMS is capable of on my Payload CMS Rich Text Demo page.
Screenshots
Here are some side by side comparisons between the new version (Next.js + Payload CMS) and old versions of my website (React SPA + WordPress).
Homepage
Desktop
Mobile
Blog Page
Desktop
Mobile
Blog Post
Desktop
Project Page
Desktop
