David Medina

Starting a new blog with Next.js + Vercel + Sanity.io

Cover Image for Starting a new blog with Next.js + Vercel + Sanity.io
Picture of David Medina, blog author
David Medina

Soon after my last day at Vercel, I decided to start a new blog that I could deploy on a Vercel hobby account to practice some of the skills I learned while working there as a Manager of one of the CSM teams. I wanted to get started quickly, so I searched the available templates to see my options. After considering a few blog templates with CMS integrations like WordPress and Prismic, I went with the blog-nextjs-sanity template which offers a sanity.io powered blog with native content editing and instant previews.

A few thoughts about my experience with setting it up from scratch:

  • I had no previous experience with Sanity but I didn't need much to get going. Creating a free Sanity account first makes the project creation flow in Vercel much easier
  • The process of creating a new Vercel project (like starting your personal blog) by using a template is wonderful and easy for all levels of coders. The process boils down to:
    1. Create a GitHub repo
    2. Add the Vercel Sanity integration and create a new Sanity project
    3. Let Vercel do the initial deployment and enjoy the confetti
    4. Follow the steps to set up your project locally and deploy it to production
    5. Open your deployed URL to see your brand new blog and follow the "Next steps" suggested to access your Sanity Studio (the content creation backend) by adding a CORS origin URL from Vercel that can connect to the Sanity API
    6. Remove the "Next steps" block
    7. Follow the steps to set up ISR with Vercel & Sanity
    8. Create some content in your Sanity Studio
    9. Ship blog posts
  • The Sanity integration for Vercel comes with a basic Sanity schema that allows me to set up the basic information for the blog like title, description, OG image, add myself as an Author and create posts
  • The post schema is enough to get started, offering a title, post slug, content (that uses Portable Text), excerpt, cover image, date and author
  • Publishing new content and content updates requires no new Vercel builds as long as you set up ISR but once you do, the content flows seamlessly in seconds

So this is it. I have a new blog up and running with Next.js + Vercel + Sanity.io and all in all, the process took me about 1 hour. There are a couple of improvements that I have in mind to make it feel more my own like:

  1. Improve the post content presentation to my liking and support more content styles and decorators
  2. Play with the Sanity schemas to add post categories or tags
  3. Add a search feature
  4. Offer social media share sheets
  5. Add "static" pages for contact info
  6. Consider post paging

I highly encourage anyone to go through this journey if you're interested in learning how to build a website with Next.js + Vercel. I could've well gone with an out-of-the-box solution like Medium, Substack, Tumblr, or even the good old WordPress but that would be no fun, right?


More Stories

Cover Image for B2B startups should hire more services professionals

B2B startups should hire more services professionals

Having made this switch, I saw the transferable skills professionals in the Services and Consulting industries can bring to B2B product-focused startups. From stakeholder nurturing, understanding business objectives, and expansion whitespace scoping, these professionals can quickly ramp up to understand the products that B2B startups sell to deliver great value to customers and help grow the business quickly.

Picture of David Medina, blog author
David Medina
Cover Image for Dev productivity, the elusive creature

Dev productivity, the elusive creature

Whether you are trying to measure this for yourself, your dev teams, or the customer, measuring dev productivity remains more of an art than a science. Some companies have made a lot of progress in this field and by mix-n-matching a few of these practices, any dev org can get better at establishing productivity baselines to run a few experiments and measure improvements with a good level of confidence.

Picture of David Medina, blog author
David Medina