Nayan Kyada
Menu

The Sanity + Next.js Guide

Everything I've written on building with Sanity CMS and the Next.js App Router — grouped by topic, from getting started to Studio customisation. 33 articles, all from real production builds.

01

Getting started

Set up the stack, typed queries, and a working Studio.
How I set up Sanity Studio with live preview in Next.js App Router using PresentationSanity CMS + Next.js App Router: a practical getting started guideHow I Ship Sub-200ms TTFB on Sanity-Powered Pages with PPR and Edge
02

GROQ & data modelling

Query and shape content without waterfalls.
How I write advanced GROQ queries with joins, coalesce, and array flattening in SanityHow I build Sanity Portable Text custom components in Next.jsHow I set up Sanity TypeGen for fully typed GROQ queries in TypeScriptSanity CMS vs Contentful for Next.js projects: an honest comparisonHow I replaced Sanity's default slug generator with a custom validation hook to catch duplicate slugs before publishHow I Handle Conditional GROQ Projections to Cut Query Payload by 60%How I Model Sanity References to Avoid N+1 Queries in Next.js RSCHow I Model Multi-Locale Navigation in Sanity Without Bloating Page QueriesHow I Structure Sanity Schemas to Avoid Query Waterfalls in Next.jsHow I Shaved 140 kB Off a Next.js Bundle by Lazy-Loading Sanity Portable Text
03

Draft mode & preview

Live preview and secure draft flows at the edge.
How I rotate Sanity draft mode secrets at the edge without redeploying Next.jsHow I set up Sanity draft mode preview with Next.js App Router and Vercel Edge ConfigHow I Handle Sanity Draft Mode Without Sacrificing Edge Performance
04

Images & media

Sanity's image pipeline, CLS, and video.
How I use @next/bundle-analyzer to find and fix Next.js bundle size bloatHow I cut Next.js bundle size by analysing and reducing chunk bloatHow I wire Mux video into a Next.js + Sanity CMS upload workflowHow I serve WebP and AVIF from Sanity without double-encoding in Next.jsHow I derive sizes, width, and height from Sanity metadata to kill CLSHow I wire next/image to Sanity hotspot focal point data for pixel-perfect cropsHow I keep Sanity image pipelines under 50 kB using LQIP hashes and blur overlays
05

Revalidation & webhooks

Keep published content fresh with ISR.
How I sync Sanity CMS to Algolia search in a Next.js appHow I wire Sanity webhooks to Next.js ISR revalidation with HMAC verificationHow I reduced Sanity webhook fanout by batching revalidation tags in a single route handler
06

Internationalization

Multi-locale content and navigation.
How I wire Sanity CMS multilingual content to Next.js with next-intl
07

Sanity Studio & workflow

Shape the Studio around how editors actually work.
How I set up Sanity document-level permissions with role-based access controlHow I build a Sanity Studio custom input component with a colour pickerHow I build a custom Sanity document actions publishing workflowHow I Handle Sanity Content Versioning Without Breaking Client PagesHow I audit and prune unused Sanity document types to reclaim Studio performanceHow I use Sanity's structure builder to hide draft noise and speed up editor workflow

Want this built, not just documented?

I take on Sanity CMS + Next.js builds and migrations for startups and agencies — fixed price, staging URL from day one.

Hire a Sanity CMS developer →All posts ↗