Introduction

Migrated my blog to Next.js few days ago.

Not as grand as that of Kent C. Dodds' website but took awhile to migrate from Gatsby.js ("Gatsby") to Next.js ("Next").

Why Migrate (again)?

Two years in The Great Gatsby Migration post, the reason for moving from WordPress to Gatsby were due to pricing, performance, and bad domain name.

The reasons for Next migrations are

1. Upgrade issues (found myself blogging less)
2. Development issues
3. Magical Abstraction (hint: GraphQL)

Let me dive into further into reasons.

Upgrade Issues

Every time Gatsby releases a new version, a simple NPM package upgrade failed to run the site. Myriad of reasons as I had many Gatsby plugins and configurations.

Can't put the full blame on Gatsby because my bugs caused lotcha issues as well.

But the issues were that it was almost impossible to find out what caused the run/build-time issues as error messages were cryptic.

Found myself spending days or sometimes a week trying to upgrade patches or minor versions.

The major version upgrade (v2 → v3) took so long (for weeks I was on it on and off) with so many errors and issues, I gave up.

I found myself not blogging at all out of frustration.

Development Issues

I have 100+ blog entries, many of which contain images. Starting a dev server takes a minute to start (due to image optimizations). It was becoming unbearable.

Optimization is great for the published site. But the development experience was subpar. Imagine restarting often due to configuration changes and plugin issues.

Magical Abstraction

Jared Palmer (of Formik, razzle, and tsdx fame) posted Gatsby vs. Next.js and many of which applies to my experience.

GraphQL was an overkill for my simple blogging site. Cryptic error messages due to plugin abstractions were frustrating.

Why Next.js?

Personal preferences came into play.

Considered "documentation" frameworks such as Docusaurus and Docz.

My preference for styling is to use Tailwind CSS ("TW") but it was hard to make TW to play nice with them. Also Docz uses Gatsby.

Next.js is has a better startup time than Gatsby. Data fetching was easier without GraphQL abstraction. That means, less boilerplate code, and easier debugging without a third party tool (such as GraphiQL).

Next.js is fairly backwards-compatible with previous major versions. Upgrading from v10 to v11 wasn't bad).

Permanent HTTP 301 redirects were easy as the site's hosted on Vercel.
(Previous site's redirects were done with Cloudflare.)

Parting Words

I might have left out some other rasons so might update or mention in the next post.

The next post will be technologies used for implementing the new site.