Sanity

Overview

Sanity is a structured content platform with real-time collaboration, GROQ querying, and a customizable React-based Studio. Content is stored in the Content Lake with CDN delivery, Portable Text for structured rich content, and visual editing capabilities for live frontend previews.

Instructions

• When defining schemas, use

  defineType()

  and

  defineField()

  with validation rules, model content for reuse by separating pages from content blocks, and use references over inline objects for shared content.
• When querying data, write GROQ queries with projections to fetch only needed fields, use the

  ->

  dereference operator for joined data, and set

  useCdn: true

  for production reads.
• When customizing Sanity Studio, configure desk structure for sidebar navigation, add custom input components for specialized editing, and create custom publish workflows with actions.
• When building rich content, use Portable Text which is structured data (not HTML) that renders on any platform, with customizable toolbar, custom blocks, and inline objects.
• When integrating with Next.js, use

  next-sanity

  with ISR, preview mode, and visual editing, and

  @sanity/visual-editing

  for click-to-edit overlays in the frontend.
• When managing environments, use datasets (production, staging, development) for content isolation, GROQ-powered webhooks for filtered build triggers, and set

  apiVersion

  to a specific date to avoid breaking changes.
• When handling images, use Sanity's image with hotspot for focal point selection and

  sanity-image-url

  for generating responsive image URLs with transforms.

Examples

Example 1: Build a content-driven marketing site

User request: "Set up Sanity with Next.js for a marketing site with modular page builder"

Actions:

1. Define page, hero, feature, CTA, and testimonial schemas as reusable block types
2. Configure Sanity Studio with desk structure and live preview
3. Set up

   next-sanity

   with ISR and GROQ queries for each page type
4. Enable visual editing with

   @sanity/visual-editing

   for click-to-edit overlays

Output: A modular marketing site where editors build pages from reusable content blocks with live preview.

Example 2: Implement real-time content preview

User request: "Add live preview to our Sanity + Next.js site so editors see changes as they type"

Actions:

1. Configure Sanity Studio's Presentation tool for side-by-side editing
2. Set up

   @sanity/visual-editing

   in the Next.js frontend for click-to-edit overlays
3. Use

   client.listen()

   for real-time content updates in preview mode
4. Configure draft content display with

   !(_id in path("drafts.**"))

   filtering

Output: A live editing experience where content changes appear in the frontend as editors type.

Guidelines

• Use

  defineType()

  and

  defineField()

  for schema definitions; they provide TypeScript types for the Studio.
• Model content for reuse: separate pages from content blocks so blocks can appear on any page.
• Use references over inline objects for content that appears in multiple places.
• Query with GROQ projections to fetch only needed fields, not entire documents.
• Use the CDN API (

  useCdn: true

  ) for production reads; it is free and fast.
• Set

  apiVersion

  to a specific date to avoid breaking changes.
• Use Portable Text for rich content; it is structured data that renders on any platform.