Sanity Best Practices

1---2name: sanity-best-practices3description: Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, Blueprints, and framework integrations such as Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, and the App SDK. Use this skill whenever working with Sanity schemas, defineType or defineField, GROQ or defineQuery, content modeling, Presentation or preview setups, Sanity-powered frontend integrations, Sanity Functions, documentEventHandler, defineDocumentFunction, defineMediaLibraryAssetFunction, @sanity/functions, @sanity/blueprints, sanity.blueprint.ts, event-driven content automation, or when reviewing and fixing a Sanity codebase.4---5 6# Sanity Best Practices7 8Comprehensive best practices and integration guides for Sanity development, maintained by Sanity. Use the quick reference below to load only the one or two topic files that match the task.9 10## When to Apply11 12Reference these guidelines when:13- Setting up a new Sanity project or onboarding14- Integrating Sanity with a frontend framework (Next.js, Nuxt, Astro, Remix, SvelteKit, Hydrogen)15- Writing GROQ queries or optimizing performance16- Designing content schemas17- Implementing Visual Editing and live preview18- Working with images, Portable Text, or page builders19- Configuring Sanity Studio structure20- Setting up TypeGen for type safety21- Implementing localization22- Migrating content from other systems23- Building custom apps with the Sanity App SDK24- Managing infrastructure with Blueprints25- Automating content workflows with Sanity Functions26 27## Quick Reference28 29### Integration Guides30 31- `get-started` - Interactive onboarding for new Sanity projects32- `nextjs` - Next.js App Router, Live Content API, embedded Studio33- `nuxt` - Nuxt integration with @nuxtjs/sanity34- `angular` - Angular integration with @sanity/client, signals, resource API35- `astro` - Astro integration with @sanity/astro36- `remix` - React Router / Remix integration37- `svelte` - SvelteKit integration with @sanity/svelte-loader38- `hydrogen` - Shopify Hydrogen with Sanity39- `project-structure` - Monorepo and embedded Studio patterns40- `app-sdk` - Custom applications with Sanity App SDK41- `blueprints` - Infrastructure as Code with Sanity Blueprints42- `functions` - Automating content workflows with Sanity Functions43 44### Topic Guides45 46- `groq` - GROQ query patterns, type safety, performance optimization47- `schema` - Schema design, field definitions, validation, deprecation patterns48- `visual-editing` - Presentation Tool, Stega, overlays, live preview49- `page-builder` - Page Builder arrays, block components, live editing50- `portable-text` - Rich text rendering and custom components51- `image` - Image schema, URL builder, hotspots, LQIP, Next.js Image52- `studio-structure` - Desk structure, singletons, navigation53- `typegen` - TypeGen configuration, workflow, type utilities54- `seo` - Metadata, sitemaps, Open Graph, JSON-LD55- `localization` - i18n patterns, document vs field-level, locale management56- `migration` - Content import overview (see also `migration-html-import`)57- `migration-html-import` - HTML to Portable Text with @portabletext/block-tools58 59## How to Use60 61Start with the single framework or topic guide that best matches the request, then read additional references only when the task crosses concerns. Use these reference files for detailed explanations and code examples:62 63```64references/groq.md65references/schema.md66references/nextjs.md67```68 69Each reference file contains:70- Comprehensive topic or integration coverage71- Incorrect and correct code examples72- Decision matrices and workflow guidance73- Framework-specific patterns where applicable