Starting a new blog with Next.js + Vercel + Sanity.io
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:
- Create a GitHub repo
- Add the Vercel Sanity integration and create a new Sanity project
- Let Vercel do the initial deployment and enjoy the confetti
- Follow the steps to set up your project locally and deploy it to production
- 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
- Remove the "Next steps" block
- Follow the steps to set up ISR with Vercel & Sanity
- Create some content in your Sanity Studio
- 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:
- Improve the post content presentation to my liking and support more content styles and decorators
- Play with the Sanity schemas to add post categories or tags
- Add a search feature
- Offer social media share sheets
- Add "static" pages for contact info
- 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?