Migrate Static Website From Gatsby to NextJS. Is It Worth It?

Let me share my experience and thought process behind moving a static website from Gatsby to NextJS so you can find interesting bits for your project.

I started writing blog posts on Medium in 2017. The platform is good enough to get going, but if you want to customize your posts, promote something and truly own your content, you need a dedicated blog. I did basic research, and at that time, Gatsby was an obvious choice for starting a static website with React.

I had a blog on Gatsby for two years while not working actively on content. Yet recently, I got back to consistent content creation and wanted to bring the UX/UI of the blog to the next stage. Yet I wasn't sure continuing with Gatsby would work long term. Its plugins always had troubles, and the GraphQL setup didn't feel intuitive.

Yet my blog had more than one hundred posts, and I wanted to test it on something smaller. Luckily I had another gatsby website - booksconcepts.com with highlights from nonfictional books bringing around 6 thousand monthly visitors from Google.

The main difference between NextJS and Gatsby is the data layer. NextJS allows you to do it any way you like through either getStaticProps or getServerSideProps, while Gatsby makes you use a GrahQL layer. To move markdown files, I had to write a few small functions that read files from a local folder and convert them to the Book format. We don't need plugins to parse markdown files - it's enough to use a single function. The only time-consuming part of migrating to NextJS was image optimization. Gatsby does this at the build time, while NextJS requires a server. I solved it well enough with a bash script and a few React components, which you can learn about in the video in the description.

Migrating BooksConcepts was a minor success, but as I headed toward radzion.com's blog, I reasoned it would take too much time to make it worth it. NextJS doesn't allow storing images outside the public folder, while my current setup keeps markdown and image files together. So I would need to write a sophisticated migration script or do it manually. In the end, I decided to upgrade the UX/UI of the current website and decouple Gatsby and the representation lawyer as much as possible.