Early 2024, I took on fully revamping this personal blog of mine, sujaykundu.com. I wanted to move away from WordPress and switch to Next.js (app router) and also it as a static site generator. I did it, and could not be more happier with the results.

This post is less of a how-to guide and more of an explanation of the process I took to move my blog (the site you are on now) from WordPress to a fully static Next.js application.

The motivation behind switching to Next.js

What motivated me to move away from WordPress and over to Next.js? Speed was the number one factor. I was getting poor Lighthouse and PageRank scores, especially in the speed category. I thought maybe I could pay for better WordPress hosting, but with free static hosting available and the React ecosystem being so strong and fast, that seemed like a waste. I also wanted to learn Next.js 14 in the process.

Previous Tech Stack

• WordPress
• Elementor (Page Builder)
• Cloudflare (CDN)
• Google Analytics
• Hostinger Wordpress (Linux Hosting)
• Godaddy (Domain Registrar)

Current Tech Stack

• Next.js 14
• Typescript
• Tailwind CSS
• Tanstack Query
• GraphQL
• Framer Motion (Animations)
• Vercel (Hosting and Analytics)
• MDX (Markdown)
• Contentlayer (Content Management)
• Cloudinary (Image Optimization)
• Godaddy (Domain Registrar)

Audit Reports

Here are the PageRank scores I was seeing on my WordPress site. Look at that low-performance score and long load times.

with

• 1 vCPU
• 1 GB RAM
• 30 GB SSD
• 1 TB Transfer
• $6 per month (Hostinger Wordpress)

Lighthouse Report:

As you can see, the site was slow and had a lot of room for improvement. I decided to move away from WordPress and create a statically generated site using Next.js. Also Vercel, the creators of Next.js, which is a static site hosting platform, was offering free hosting for my site (hobby sites). I figured I could not lose.

After few weeks of development, here are the results

I was able to move my site over to Next.js. Here are the results:

As you can see, the site is now much faster and has a much better Lighthouse score. I was able to achieve this by using Next.js's static site generation feature. This allows me to generate static HTML pages at build time and serve them to the user. This is much faster than WordPress's dynamic page generation.

So how does Next.js do this? What makes Next.js so different from WordPress that now all my Lighthouse scores are in the green and some even at 100?

Jamstack and Static Site Generation

Using Jamstack! That's really what makes Next.js so cool. Next.js is built with Jamstack in mind with static site generation (SSG).

Nextjs vs Wordpress

Advantages of Next.js over WordPress

• It's Fast ⚡️, SEO Friendly 🔍, Secure 🔒, Scalable 📈, Developer Friendly 💻
• It's a Full Stack React Framework 📦 which can achieve 100/100 Lighthouse Score 💚
• It's Free to Host 🤑 (for hobby sites)
• Easy to customize 🎨

Disadvantages of Next.js over WordPress

• Learning Curve: Next.js is a React framework, which means that you need to learn React to use it. This is not the case with WordPress, which is a PHP framework.
• Plugin Ecosystem: WordPress has a large plugin ecosystem, which means that you can find a plugin for almost anything. Next.js does not have a plugin ecosystem, which means that you need to build your own plugins. Though 3rd party libraries can be used to achieve the same functionality.
• Community: WordPress has a large community, which means that you can find help and resources for almost anything. Next.js does not have a large community as compared to Wordpress, but its growing. which means that you need to find help and resources elsewhere.
• Cost: Next.js is a free and open source framework, which means that you can use it for free. WordPress is a free and open source framework, but it can be expensive to host and maintain.
• No Admin Panel: Next.js is a static site generator, which means that it doesn't have an admin panel. This means that you need to use a different tool to manage your content or build your own admin panel.

Advantages of Vercel over Hostinger

• Analytics

Vercel provides analytics out of the box. This means that you can see how many people are visiting your site, where they are coming from, and what pages they are visiting. This is a great way to get insights into your site's performance and to make data-driven decisions.

• Speed Insights

Vercel provides speed insights out of the box. This means that you can see how fast your site is loading and where you can make improvements. This is a great way to ensure that your site is fast and performs well.

• Observability

Vercel provides observability out of the box. This means that you can see how your site is performing in real time. This is a great way to ensure that your site is up and running and to make sure that you are aware of any issues that may arise.

• Firewall

Vercel provides a firewall out of the box. This means that you can protect your site from malicious traffic. This is a great way to ensure that your site is secure and that it is not vulnerable to attacks.

• Deployments

Vercel provides deployments out of the box. This means that you can deploy your site with a single click. This is a great way to ensure that your site is always up to date and that you can make changes quickly and easily.

Using Github Actions, I can automatically deploy my site whenever I push changes to my repository. This is a great way to ensure that my site is always up to date and that I can make changes quickly and easily.

The process of switching to Next.js

The process of switching to Next.js was not as simple as I thought it would be. I thought I could just export my WordPress site to JSON and then import it into Next.js. However, I quickly realized that this was not the case. I had to manually migrate my site. I decided to use the WordPress Export to Markdown open source project to export my posts and assets to Markdown

1. Export WordPress site to XML and XML to Markdown

All you need to do is export the website content using the Wordpress Export Tool and then use the WordPress Export to Markdown open source project to convert the XML file to Markdown.

2. Build Frontend using Nextjs

I then created a new Next.js project and imported the Markdown files into the project. I used the Next.js MDX feature to import the Markdown files. This allows me to use Markdown in my Next.js project.

I then had to manually migrate my images and other assets. I used the Next.js Image Component to optimize my images. This was a bit of a pain, but it was worth it in the end.

3. Create a new design and layout

Best part of switching to Next.js was that I was able to create a new design and layout for my site. I was able to use Tailwind CSS to style my site and make it responsive. I also used the Next.js Link Component to create a navigation menu.

Built several components such as a gallery, project and blog post card, a navigation menu, a footer, and many other custom ui components using react. I also created a custom 404 page and a custom error page.

4. Use Contentlayer or integrate a Headless CMS

I used Contentlayer to create a data layer for my site. This allowed me to query my Markdown files and use the data in my Next.js components. I was able to create a blog page that displays all of my blog posts and a blog post page that displays a single blog post.

5. Utilize CDN for Images

I used Cloudinary to host my images. This allowed me to optimize my images and serve them from a CDN. This improved the performance of my site.

6. Deploy to Vercel

I deployed my site to Vercel. Vercel is a great platform for deploying Next.js sites. It is free and very easy to use. I was able to deploy my site in just a few minutes.

Wrapping up

My site has been 100% Next.js now for a couple of months and glad I am here. I have no desire to go back to WordPress It's a bit more work to update my packages on my own, if I want special features I need to seek out and research libraries myself. But I am a developer those are things I enjoy doing.

The benefits of a blazingly fast, reliable site make it worth it. And learning about Jamstack and SGG along the way was fun as well. I have even seen my site being ranked more highly on Google since being on Next.js, I attribute that fully to the increase in speed and page rendering made possible by Next.js.

Some other nifty things now that I am fully on Next.js:

A push to GitHub automatically builds and publishes a new production site All content is in markdown

Interested in Next.js?

If you have gotten this far, you must be interested in Next.js. Vercel, the creators of Next.js, have a great tutorial to help you get started, Next.js Getting Started.

It is worth noting that Next.js is not the only static site generator out there. There are dozens of viable Javascript options and one for almost any other language as well. I found Next.js to have the lowest barrier to entry while being fully featured as well. It is also the only one right now to support a hybrid SSG and Server Side Rendering (SSR) site. You can choose on a page basis whether you do SSG or SSR.