Published on

✨Brand New Site✨ - Migrating from Gatsby to NextJS

Authors

I am tempted to start with a rant, but a fellow developer already seems to have covered this sentiment elsewhere. TLDR - maintaining your own website is both arduous and fun! Despite the pain, it is rewarding and I consider it my playground for web-related things. Now back to the topic of discussion: how and why I migrated my Gatsby website to NextJS.

What I was Looking for aka Requirements

As a developer, I need an SSG (static-site generator) that supports markup
So that I can store my blogs in a version control system in the cloud (someone else's computer)
and I can benefit from a similar workflow I use when developing software

As a developer, I need an SSG that has a fast build time
So that I can have a seamless and enjoyable deployment experience when I publish an article

As a developer, I would like to have control over how and where my data is stored
and the code that powers my website
So that even if my site went down or if I decide to bring down my site
I still have reproducible copies of my blog in markdown format
and reproducible infrastructure to redeploy my site

Jamstack

Without going into details of what Jamstack means, the requirements above summarises some of the great benefits of a Jamstack architecture. Read more here. Both Gatsby and NextJS fall into the category of SSGs - static site generators. And while Gatsby met some of the requirements above at the time, it started to fall behind from the second requirement and, this is where NextJS takes the rein and blows Gatsby out of the water. Migrating my site over to NextJS became a no-brainer.

The Complete Stack

  • NextJS
  • Tailwind CSS
  • Decap CMS (formerly Netlify CMS)
  • GitHub

One thing you'll notice is that some of them are open-source and community maintained technologies and they also provide an easy-to-understand means for you to set up a website.

It gets even better, my site template is from an open-source developer's work which you can see here.

The Lowdown

Blog Content

Since both Gatsby and NextJS support markup language, moving my blog content was relatively easy. After pulling down a clone of timlrx's Tailwind NextJS template to my own GitHub repository, I moved the markdown files from my old blog repository to the current one. Some of the content format broke, but not by much. A lot of the errors that appeared were due to formatting difference in the Frontmatter of my old content's markdown files. This only needed some tweaking to adhere to the formatting in the new template.

The CMS

Next up was migrating the CMS backend I use for publishing. Most web developers, new and experienced, appreciate the developer experience on the Netlify platform. This includes their open-source CMS. Adding the CMS backend to my new site was as easy as transferring the config.yml file of my old site to the new one. You can read more about the open-source CMS here.

The DNS

Since my DNS zone is with Netlify, this was equally straightforward. All I had to do was remove the custom domain from my old site settings and add it to the new site settings. Netlify did the rest of the magic behind the scenes.