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 How I found a volunteering opportunity in tech

How I found a volunteering opportunity in tech

After 15 years of back-to-back jobs in a highly rewarding career, I decided to take a career break and invest some of my free time in volunteering. I wanted to mentor outside of the companies that I worked for, so I set myself on a search journey to find the right match for an organization that had an inspiring purpose and mission. Here is how I found it.

Picture of David Medina, blog author
David Medina
Cover Image for How to cross the chasm in the coding assistant tool space?

How to cross the chasm in the coding assistant tool space?

Stack Overflow's recent pulse survey on coding assistant tools offers intriguing insights from 1,700 developers about their experiences with AI tools. The survey highlights high adoption rates and satisfaction, especially with tools like Codeium, Copilot, and ChatGPT. However, challenges persist, particularly in contexts requiring deep codebase understanding. Key takeaways emphasize the need for clear AI strategies, measurable productivity metrics, and improved contextual understanding by AI tools to enhance their effectiveness.

Picture of David Medina, blog author
David Medina