Tyler Benfield

Tyler Benfield

Migrating my site to Next.js

October 10, 2020

First, a little back story. Should you build a small personal website/blog in React? Probably not. Is it overkill? Absolutely. Hear me out though and I may change your mind.

Years ago my personal website was built on Jekyll and hosted on GitHub Pages. It was a pretty simple setup with the most annoying part being installing Ruby on my Windows machine to build and run locally. Eventually I improved that with a simple Docker container. There wasn't much content on my site and I seldom touched it, so this approach served me well for quite a while.

Over time my attention and experience began to become more React-centric. I eventually had people asking why my personal site wasn't written in React. It was an easy answer: I didn't need it. React makes building dynamic, interactive user interfaces a breeze, but my site had none of that. Plus, I wanted my site to be hosted as static content and easily indexable, so client-side rendering wasn't a good option. In more recent years though, React began to be used in static site generators like Gatsby and those concerns were addressed. React was now more like a template language, just like Jekyll has Liquid. At that point I didn't have a reason not to switch to Gatsby. I could use the technology I am most familiar with, avoid the question of why my site is not built in that technology, and still have efficient hosting.

The conversion was not trivial though. I decided to modernize my site while migrating it and rebuilt it from scratch. I also switched from hosting on GitHub Pages to Netlify, though that was actually the easiest part. Getting Gatsby configured the way I wanted proved more difficult than I had anticipated, especially having a depth of React experience to lean on. I found myself fighting plugin configurations and piecing together articles I had found from searching until I finally landed on a setup that worked, but was far from what I wanted. The most difficult problem I remember having was getting two different sets of Markdown processed, one for my blog and the other for project pages. Those needed to be displayed separately with different templates. I got it to work, but I wasn't happy with the confusing setup.

Despite the annoyances I kept my site on Gatsby for a couple years. This year, however, a former Gatsby employee described how Gatsby treated their employees, particularly calling out how they approached diversity. This conversation initially started on Twitter and lead to an open letter to the community from many Gatsby employees acknowledging the issues. While Gatsby has promised improvement, this sparked me to reconsider the technology behind my personal site. It didn't take much convincing given the annoyances I have already mentioned, so I started evaluating the state of other options.

Next.js stood out as the clear front-runner to me. Their static site generation had matured in the time since my last site rebuild and easily checked all of my requirements. The greatest selling point was the reliance on regular JavaScript/Node.js to do things like process markdown and generate pages. Rather than showing off how I could configure Gatsby plugins 🤮, I can show off my JavaScript skills. The most annoying part of my Gatsby setup, blog posts vs projects in Markdown, became trivial. In fact, after I committed to switching, I had the site switched over in a few hours. The result can be seen in the pull request here.

There are still a few things I'm working out. Favicon generation from a single image would be excellent, but I'm trying to find a plain JavaScript approach that doesn't rely on something like a Webpack plugin (though I may cave and take that approach). I also gave up my ServiceWorker, but I didn't particularly need it to begin with.

Overall I am extremely satisfied with Next.js and would recommend it to anyone looking to build a static site in React. I can't speak as much to server-side apps, though I've heard great things about that too. Keep an eye on Remix as an alternative as well. Michael and Ryan have put a lot of thought and years of experience into that project and I expect big things from it, though I probably won't migrate my site again without some big selling points.