Next.js To Gatsby.js - A Migration Story

After building a blog with Gatsby I was so satisfied with the experience that I decided to port my own site over to Gatsby as well. I had previously developed the site using Next - which was being used by the company that I was working for. It’s funny to look back at the relatively frustrating experience I had with Next (the most frequent complaint being that exceptions were often swallowed, making debugging issues … difficult), as it was also my introduction to development with React.

Enter Gatsby

The process of building a blog with Gatsby was so painless that I got to revisiting the idea of my personal website. I hadn’t touched it in months - how would it go porting it over to Gatsby?

Turns out it went pretty easily. And I think there’s something big to be said about the modularity that I thought I was working towards when first learning Next - swapping out the framework from Next to Gatsby ultimately didn’t require a huge re-write, or even much in the way of React component changes. ~100 lines of code changed is extremely small in the scheme of things.

That being said, the big advantages I have seen thus far:

It only took a few hours to port over. Most of this was configuration and re-formatting text that was previously within JSX into Markdown. I gave up some flexbox orientation for images that had been pretty slick in order to gain …

• Image optimization - this wasn’t something that I had handled on my own site, but because it’s so easy to do within the Gatsby ecosystem, I figured … why not?

• Startup time - significantly reduced. Even when Next moved to async loading of page assets, the startup time had gotten to be a real hassle.

• Less magic - Next is powerful. Very powerful. It also does a lot under the hood and sometimes you just need to know something - like when _app.jsx /.tsx renders (once on the server and once on the client?) versus _document.jsx/.tsx … Or you’re trying to use getInitialProps without proper prop passing. Or you’re trying to chain plugins together and adding a new one to your next config somehow borks your use of typescript … etc. I don’t want to beat a dead horse. I think they have a great product, it just wasn’t the right fit for my use case and I learned that the hard way.

• Ecosystem. The Gatsby community is extremely welcoming!