The New Next.js Based vanslaars.io

It’s a story as old as developer blogs. You sit down to write, something is broken or just not quite right, you get into some extreme yak shaving¹ and the next thing you know, you’ve built a new blog and never did get around to writing that post!

Welcome to my latest adventure in shaving Yaks! 😂

After a long period of inactivity, I wanted to write again and I wasn’t thrilled with how my previous Gatsby site looked or worked. In fact, it had stopped working for me. Specifically, I couldn’t get new builds to run. I could have dug into it a bit, fixed it, and moved on. I didn’t do that. Instead, I started from scratch and built a brand new site in my down time over the past few weeks using Next.js, MDX, and Tailwind CSS. If I had just fixed it, then I wouldn’t have had the learning experience that came with starting from scratch 😅.

Previous Iterations

The last two iterations of this site were built on Gatsby. The first time around with Gatsby, I was moving away from a Hugo site that was really far out of date. Rather than struggle to bring it up to date, I opted to move over to Gatsby. The second time around, I was still using Gatsby and building on the new (at the time) Themes support. I used a couple of themes together to create my blog and a section for notes, an attempt at starting a digital garden. It was pretty quick and painless to setup, and it did the job.

Motivation

I want to start this off by saying that I think Gatsby is awesome! The ability to essentially npm install functionality into a web app via themes is super powerful. This time around, I have different goals for this site beyond a languishing blog. I wanted to massively upgrade the look and feel. I also wanted to have more control and greater understanding of the code running this site to support future plans.

Greater Control and Understanding

Customizing Gatsby themes is pretty straightforward, but you’re still working in someone else’s code. When you have several themes all installed via npm, you’re essentially working in several code bases. I wanted to have a bit more control of the code, the patterns, the styling mechanism, and the organization. I also wanted to decide where to build something myself and where to use an abstraction, and I wanted to choose the abstractions.

Styling

I wanted to style the site using Tailwind, and having complete control of the markup without having to decipher someone else’s structure made this straight forward. I’m not what you would call “good at design” 😂. Tailwind gives me some pretty sensible defaults and the ability to iterate quickly on the look and feel of elements. The rapid iteration of Tailwind makes it better but I’m still not good at design, so I ultimately ended up buying Tailwind UI, pulling some elements from that and tweaking until I had what you’re looking at now. Not too bad, if you ask me.

Supporting Future Goals

For now, I’m planning to write with regular frequency and to get back into a rhythm with screencasting on egghead.io. Beyond that, I see more for the future of this site, so I tried to make choices that would support that future. The move to Next.js and choosing Vercel to host the site seem like the best choices for both my immediate and long term plans. Of course, things change, and I will adjust as needed.

The Technical Details

I’ll be publishing some more tutorial-style posts based on how I built this site soon. For now, here’s some highlights of the technology that went into this site.

Next.js 12

I’ve been a fan of Next.js since its early days. The flexibility it offers in when and how content is rendered, coupled with it’s tight integration with Vercel makes it a great choice for a site like this. The content here is largely static, but I can easily add more interactivity. The Hybrid model that comes out of the box with Next means I can go from static to highly dynamic without changing tools, build process or host.

MDX

I love writing in Markdown. It’s how I write everything that isn’t on paper, and I have, occasionally, written things in markdown syntax with a pen without realizing what I was doing 😅.

With MDX, I get to write in Markdown, but I have the option to include dynamic, react-based components. Authoring with MDX gives me the best of both worlds!

This time around, I installed the dependencies directly, wired up the file system code and configured the plugins I wanted. I have all the functionality I got with Gatsby, but I’m way more aware of how the pieces fit together. Not only have I learned some things from the process, but when I want to change something in the way MDX is handled, I know exactly where to go.

For example, as I was adding finishing touches to this site to get ready to take it live, I decided I wanted to process markdown in the excerpts that show on the article listing. I was able to quickly get that up and running, and since the context for this was very different than rendering an entire post, I needed to highly customize the output². Having written the code, and organized the structure myself made this a quick and straightforward task.

Tailwind CSS

I am not very productive with vanilla CSS. I can get the job done, but it’s not fast and the results aren’t always the best. With Tailwind, I can move much faster. The utility classes are intuitive and the spacing, font, and color scales it comes with by default are quite good! If I need to customize something, I can easily do that via the config. The additional capabilities that came with the new, JIT (Just In Time) compilation mode which is now the default in v3 makes it even better!

Vercel

Hosting a Next.js based site on Vercel just makes sense. All the details are taken care of for you, features like API routes and middleware just work. The CLI and web-based interfaces are nice. Getting a deployment for each branch is fantastic for previewing content and functionality alike… It’s nice having the back end details managed for you and Vercel does a phenomenal job of this.

Plop

When I can use a tool to handle repetitive tasks for me, I’m all for it. So along with the rebuild of the site, I’ve pulled in the Plop micro generator and created some templates so I can run a CLI command to generate the standard bits of a new blog post or note.

If you’re unfamiliar with the term, you can read more about Yak Shaving here ↩
I needed to strip out headings, code blocks, links, paragraphs, images, etc. Basically anything that would break the semantics or layout of the list view needed to be handled if it was present in an excerpt. I was able to do this by providing custom elements just for this instance of the MDXRemote component. ↩