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 Mid-2024 AI dev tools temperature check

Mid-2024 AI dev tools temperature check

The 2024 Stack Overflow developer survey results are in with a dedicated section for AI tooling. It gives great insights into how developers feel about using AI tools for development, serves as a great mid-year checkpoint about how things are going in 2024, and what to look forward for 2025. Here are a few observations from the results.

Picture of David Medina, blog author
David Medina
Cover Image for Pre to post-sales handoff, a key moment in the customer journey

Pre to post-sales handoff, a key moment in the customer journey

In the sales cycle or customer journey, there is a key step that can make a huge difference in how successful the delivery of a software project can be. The pre to post-sales handoff is sometimes overlooked, leaving a lot of opportunity to improve it to better set up post-sales teams for success. To make a sports analogy, it is almost like setting up a player to score with an assist; the better it is, the easier it will be for the player in the scoring position to nail it.

Picture of David Medina, blog author
David Medina