1: Building content-editable websites
Sanity powers content operations beyond a single website or application, while Next.js focuses on best-in-class content delivery. Combine them into a powerful modern stack to build content-driven experiences.
2: Create a new Next.js 15 application
Create a new, clean Next.js application with a few opinionated technology choices for TypeScript and Tailwind CSS.
3: Create a new Sanity project
Create a new free Sanity project from the command line and automatically install Sanity Studio configuration files into your Next.js project.
4: The next-sanity toolkit
Understanding next-sanity, the all-in-one Sanity toolkit for production-grade content-editable Next.js applications.
5: Query content with GROQ
Organize and author queries for your content with best-practice conventions.
6: Generate TypeScript Types
Add Type-safety to your project and reduce the likelihood that you will write code that produces errors.
7: Fetch Sanity Content
Query for your content using Sanity Client, a library compatible with the Next.js cache and React Server Components for modern, integrated data fetching.
8: Git-based workflows
Version control, collaborate on, and deploy your Next.js application by storing it in a Git repository.
9: Go live on Vercel
Publish your web application to the world. Vercel's hosting and Next.js are made for one another, so it just makes sense to put them together for this project.
10: Displaying images
Sanity stores your image assets, learn how both the Sanity CDN and Next.js's Image component help optimize rendering them.
11: Block content and rich text
Put the power of Portable Text to work for rendering simple formatted text up to complex block objects.
12: Build up the blog
With all the basics in place, let's blow out our blog front end into something more visually impressive.