Vercel and Sanity.io: a Dynamic Duo

Nognom.com needed a revamp. It’s always been a domain to test different coding styles and always intended to be a location share of insights and learnings. However, as the services that ran it went out of date, it was time for an update. With Any good update, you start with a list of requirements and look for solutions that accommodate each item. It may just be a personal site, but the intent is more than just a small CMS. Look at this as my shoutout to Vercel and Sanity.io for giving me great value at no cost.

Requirements

The Wrong Choices

When going through requirements another step I like to do is get the wrong choices out of the way. In this case, the wrong choices are easy to see. No WordPress, Drupal, or google sites. If anyone is developing a blog they would likely look at one of these three for an option on a personal blog. All of those are full-fledged CMS solutions that aren’t terrible choices, but they are poor choices based on the criteria I had.

You don’t learn anything when playing with baked CMS solutions like those. That’s not to say there aren’t strong opportunities to push the technologies and build something awesome. I spent many years as a dedicated member of the Drupal community doing just that. However, for a personal site, there just isn’t that same amount of opportunity. It’s not the learning and sharing around the campfire that Nognom’s Caveman Developments is all about.

The Right Choices

The right choices take experimentation.

Next.js

I worked with Next.js a little at Angi. My role there left me little time to do much if any development, and I took this as the opportunity to look into it. Next is massively performant when it comes to Core Web Vitals and will get you to the sub-2-second initial load time that all sites should strive to reach. Don’t know about core web vitals? You should read this article on Core Web Vitals.

Next.js offers additional opportunities for more modern techniques with eslint and typescript. There’s a lot of modernizations built into it at this point with massive adoption. As of March 2022, the framework is used by many large websites, including Walmart, Apple, Nike, Netflix, TikTok, Uber, Lyft, and Starbucks.

Vercel

Though it should have been obvious to look at Vercel. Vercel is the founding company of Next.js. However, it was discussing with a few colleagues that brought vercel.com to my attention.

What I found when I signed in was a massive toolset that allows even the most novice of engineers to bring a site to market in moments. If you were willing to just use the default, and are just looking to get a hello world to production you could do so with about 3 commands. The hardest part would be to remember your GitHub password.

Vercel hooks straight into GitHub giving you the full security with a code repository most of you are familiar with. Vercel sets up and handles the linting checks and deployment pipelines. Commit a branch and Vercel kicks off a build that you can test. I wasn’t against building this myself, but pipeline builds are not what I love about engineering. I like to be able to rapidly see the results of my work.

It took moments to say, yes to Next.js and shorter moments to say yes to Vercel. Need more value, let me hint at their automatic scaling and global CDN to ensure that your web applications perform at their best. Some of this comes at a cost, but their free version is an amazing value.

Sanity.io

With a modern Front-End, means that I had a chance to review headless CMS options. There are a lot of powerful options, but after already being excited about next.js and node servers I was looking to see what node options that out there. I had room for hosting and familiarity made me think that a headless Drupal 8 may be worth looking at but I wanted something a little cleaner.

Enter Sanity.io. I have almost 2 decades of implementing various CMS solutions and sanity gave me in moments I always wanted in a CMS. You weren’t forced to define Content types with a GUI, and relations are the simplest I have ever seen a CMS create. One machine name and you have it usable everywhere. The base implementation only took me a full day because it was just too much fun to play with and see how far I could push it.

All of it finishes with a nice GROQ query to get all your data and output it only as you want it. Give me the last 20 ‘posts’ and only give me the titles. It’s little more than 2 lines of code. There’s even a simple internal query interface to help you craft your queries called ‘vision’. Trust me when I say it’s the headless CMS you didn’t know you always needed.

The Dynamic Duo

The combination of Vercel and Sanity.io stands out as a dynamic duo. I won’t lie, it took bumbling through a few newbie mistakes I should have known better than. Don’t forget your API tokens. With the combination though I am seeing everything on my checklist being built.

Our checklist:

Vercel offers some built in performance monitoring. by: Vercel

Look at that performance output. Any site would kill for those results.

Conclusion

In conclusion, choosing Vercel and Sanity.io for your web projects is a strategic move toward efficiency, scalability, and exceptional performance. With the fast pipelines, you will have time to focus on the user experience through rapid prototyping and iterations. Whether you're a solo developer, a startup, or an enterprise, the dynamic duo of Vercel and Sanity.io empowers you to elevate your web development game. Embrace the synergy and share your learnings.