Over time, I have become frustrated with the developer experience on Gatsby. Making new posts has just become annoying as I must create a new build for every update. Plus, the fact that server was slow and fast refresh would randomly stop working, I needed to make a change.
While I am aware of Gatsby Cloud, it is overkill for what I need. And being there are other solutions out there, I took to plunge to change to Next JS.
NPM packages
The pleasant thing about Gatsby is that there is an entire ecosystem of plugins which can be added to your projects. These made development quicker and with the support of the Gatsby team to ensure quality, I was happy to use these packages.
Next JS is less opinionated on this matter. Luckily, I have built websites using Next JS, so I copied a package.json from another file as a base to get started.
As I would develop, I installed additional packages as required.
Some functionality also needed to be recreated as I was using 13 Gatsby plugins. Luckily, most of these were just copy and paste from other Next JS projects I've built.
Routing and Querying
The main point of migrating was to take advantage of Next JS preview mode and on demand revalidation. This means I could make a change and see the page rebuild in under a second.
This meant having to go from GraphQL to GROQ to support preview mode as I use Sanity.
A catch all page route was used to make the CMS manage all slugs rather than having multiple files for things like archive pages. Due to this change, I had to modify my Sanity CMS to accommodate this.
Moving to Vercel
Since I was moving to Vercel, I would lose the Netlify's built-in form handler. There's many ways I could handle this, but I chose using a Google Form as it is pretty simple to do.
Google reCaptcha was added to replace the spam filter provided by the Netlify form handler.
New Features
Along with preview and on demand revalidation, moving to Vercel also gives the opportunity to add open graph image generation. This was added quite recently so there may be issues. In my case, sometimes colours don't match.
Depending on the type of page on this site and image will be generated based on the header part of the page.
Conclusion
Pretty happy with the migration and how it turned out. While I did need to recreate some functionality, you can't beat the Vercel + Next JS developer experience. Makes me so happy I can have a great editorial experience when it comes to this site.