Headless Web Development with Sanity and Next.js

Introduction to Headless Architecture

In the world of modern web development, headless architecture has become a popular approach for building fast, efficient websites. It's a method that separates the content management system (CMS) from the presentation layer, allowing developers to use their preferred tools to create user interfaces while managing content independently through APIs.

This architecture offers several advantages, such as being framework agnostic, highly customizable, and optimized for SEO and performance. By decoupling the data from the visuals, the same content can be reused across various platforms and devices, providing a flexible solution for developers.

Understanding Key Tools: Sanity and Next.js

Sanity is an API-based headless CMS that provides developers with the ability to manipulate and retrieve content using APIs. It integrates seamlessly with React to render content into beautiful components. A standout feature of Sanity is its native preview functionality, which allows content editors to see changes before going live.

Next.js, on the other hand, is an excellent choice for the site builder. It's known for static site generation, server-side rendering, and dynamic routing. These features contribute to creating a super-fast application, as everything is compiled and bundled at build time, leading to enhanced performance.

The Role of Storybook in Development

Storybook is an interactive development environment that showcases components in isolation. This tool is beneficial for developers who want to prototype and test components without being in the app itself. It allows for quick iteration and exploration of component configurations, making it easier to build and maintain a component library.

By using Storybook, developers can view and interact with components like the Main Hero and Media Module. It provides a space for experimentation and verification of component behavior, leading to better-designed interfaces.

Setting Up the Project

To get started with building a website using Next.js and Sanity, the first step is setting up the project repository. Developers are encouraged to fork the repository to their GitHub account, clone it locally, and run the necessary scripts to get the development environment running.

During the setup, it's normal to encounter a 404 error, as the app and Sanity configuration are yet to be completed. At this stage, Storybook should be the only functional part, providing a preview of the components available for use in the project.

Creating the Sanity Interface

Building the authoring experience in Sanity involves defining a content model using schemas. These schemas act as blueprints for rendering the user interface in the CMS. Developers have the flexibility to customize the structure based on the project's needs.

In this context, content models typically fall into three categories: page content models, page modules, and data objects. Page content models define the metadata and layout for a page, while page modules mirror components. Data objects capture miscellaneous non-presentational data, such as SEO settings.

Defining Sanity Schemas

Sanity schemas are defined using a JSON-like structure, specifying the schema name, title, and a list of fields. The fields determine the inputs available in the CMS, such as text inputs or image selectors.

For example, a CTA banner schema might include fields for a heading, image, and call-to-action button. These fields mirror the props of a React component, ensuring consistency between the CMS and the front-end application.

Querying Content with GROQ

Sanity uses GROQ, its open-source query language, to fetch content. GROQ is similar to GraphQL but offers more flexibility in shaping the returned data. Developers can test GROQ queries within the Sanity studio using the Vision tab.

By crafting specific queries, developers can retrieve the exact data needed for their application, filtering and transforming it as required. This capability is crucial for efficiently building dynamic, content-driven websites.

Integrating Sanity with Next.js

To connect Sanity with Next.js, developers use the next-sanity library to create a client that fetches data from the CMS. This setup requires configuring environment variables in the project to establish a connection.

Next.js's file-based routing system allows developers to create dynamic routes for their application. By defining paths and fetching corresponding content from Sanity, developers can render pages based on the CMS data, creating a seamless integration.

Building Components Dynamically

Once the data is fetched, the next step is converting JSON data into React components. This is achieved using a build component function, which maps schema names to component names, ensuring the right components are rendered with the correct data.

Attention to detail is crucial here, as mismatched names can lead to rendering errors. By maintaining consistency in naming conventions, developers can ensure that components receive the appropriate content from Sanity.

Deploying to Production with Vercel

After building the application, the next step is deploying it to production. Vercel is a popular choice for hosting Next.js projects, providing seamless integration and monitoring tools.

To deploy, developers need to create a Vercel account, connect it to their GitHub repository, and configure environment variables. Setting up webhooks between Vercel and Sanity ensures that content updates trigger redeployment, keeping the live site in sync with the CMS.

Customizing and Expanding the Project

With the core setup complete, developers can customize their website by adjusting components, colors, and content. The flexibility of the headless architecture allows for easy expansion and modification as project requirements evolve.

By leveraging the capabilities of Next.js and Sanity, developers can build blazing fast, customizable websites that cater to the needs of modern web applications. This approach not only enhances performance but also simplifies content management, providing a powerful solution for developers working in today's digital landscape.

Watch full talk with demos and examples:

Backdrop
Please sign in to watch this workshop.
Sign in
Rate this content
Bookmark
Github

From Author:

Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.


In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.


By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.

This workshop has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

Headless architecture refers to a setup where the front-end presentation layer is completely decoupled from the back-end content management system (CMS). The data is served to the site via an API, allowing developers to use any framework or technology for the front end while managing content separately in the CMS.

Using a headless CMS offers several benefits including being framework agnostic, which allows developers to use any front-end technology. It's highly customizable, supports SEO and performance optimizations, and the content can be reused across various digital platforms and devices efficiently.

To set up a repository for a Next.js and Sanity project, you typically fork and clone a starter repo, run 'npm install' to install dependencies, and use provided scripts to launch development environments for Storybook, the app, and Sanity.

Sanity is an API-based, headless CMS that allows for real-time editing and customization of content models. It supports a rich editor interface and provides a built-in preview functionality to see changes in real-time before publishing.

Next.js is a React framework used for building web applications. It supports features like static site generation, server-side rendering, and dynamic routing, which help in building fast and efficient web applications.

Deployment on Vercel for a Next.js application involves linking your GitHub repository with Vercel, setting up environment variables, and configuring webhooks to trigger rebuilds on content updates. Vercel automates the deployment process and provides a live URL for the hosted application.

Storybook is an open-source tool for developing UI components in isolation. It allows developers to build and test UI components interactively without needing to integrate them into a web app, making the development process faster and more efficient.

Data from Sanity can be queried in a Next.js project using Sanity's Grok query language. You can write queries to fetch specific data like page paths or content, which can then be used to dynamically generate pages or populate components in the application.

Nancy Du
Nancy Du
Nataliya Ioffe
Nataliya Ioffe
71 min
25 May, 2023

Comments

Sign in or register to post your comment.
Sign in to access video transcription and chapter summary.
Sentry
Promoted
Code breaks, fix it faster

Crashes, slowdowns, regressions in prod. Seer by Sentry unifies traces, replays, errors, profiles to find root causes fast.

Watch more workshops on topic

AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app.
Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Top Content
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to discover performance issues including slow database queries in an interactive pair-programming session.
You’ll leave the workshop being able to:- Find backend issues that might be slowing down your frontend apps- Setup tracing with Sentry in a Next.js project- Debug and fix poor performance issues using tracing
This will be a live 2-hour event where you’ll have the opportunity to code along with us and ask us questions.
From Frontend to Fullstack Development With Next.js
React Summit 2025React Summit 2025
91 min
From Frontend to Fullstack Development With Next.js
Top Content
Featured Workshop
Eric Burel
Eric Burel
Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
Workshop
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Fetch, useEffect, React Query, SWR, what else?
React Advanced 2023React Advanced 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
The New Next.js App Router
React Summit 2023React Summit 2023
27 min
The New Next.js App Router
Top Content
Watch video: The New Next.js App Router
Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
Top Content
The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.
From Segments to Suspense: The Future of Next.js Caching
React Advanced 2025React Advanced 2025
27 min
From Segments to Suspense: The Future of Next.js Caching
Introduction to Cache Components in Next.js 16, transforming the app router with new features like partial pre-rendering, Dynamic I.O., and caching directives. Deep dive into static params generation in Next.js focusing on changes in generating static params for improved performance. Exploring challenges of generating static params and balancing static vs. dynamic rendering for better performance. Addressing challenges with cache components, optimizing static and dynamic rendering for improved performance. Understanding impact of parameters on rendering with cache components, managing dynamic components, and introducing suspense boundaries for faster page loads. Enhancing cache life APIs, introducing a new caching model for static outputs in Next.js. Revolutionizing cache management with granular control over cache lifetimes and dynamic segment configuration. Navigating data and caching in Next.js, exploring cache components guidance and caching differences between server and client components.
12 Top Sanity CMS Agencies and Development Companies to Hire Worldwide
12 Top Sanity CMS Agencies and Development Companies to Hire Worldwide
Featured Article
Katarina
Katarina
An expert listicle of popular Sanity agencies, with evaluation criteria, ratings, time zones, target audiences, common projects, and a decision tree to help you pick the right Sanity partner. This is a way to approach finding your best development agency wisely, not just by typing ‘find best Sanity agency’, but using your critical thinking skills.These numbers show why the “right‑tool‑for‑the‑job” approach matters: small teams move faster, larger enterprises scale content across channels, and digital marketers ship campaigns without waiting on dev tickets.Why this Sanity agency list existsMost "Top Sanity Agencies" lists are written by Sanity agencies and Sanity development companies trying to rank themselves. That's not automatically a problem, but it means rankings move based on whoever owns the URL, not who's actually shipping the best work. This list takes a different approach: agencies are grouped by best fit, not by SEO position. Evaluation criteria to choose your developer may be just numerous, but pick your Sanity agency based on your business situation. Assess your budget and check on reasonable criteria of Sanity agency achievements and market positioning.What is Sanity service?Sanity service is a fast, flexible platform for delivering structured content to digital devices and products. It is a software as a service product that makes it easier for developers to integrate content by treating it as structured data.Why is Sanity CMS Hyping Now?Sanity CMS popularity is evident, Anthropic, Shopify, Figma, National Geographic, Unilever, and other prominent names and brands use Sanity CMS daily, and trust it for proven flexibility, as the CMS is loved for clear real-time editing, customizable workspace with Sanity Studio, and general flexibility. Many devs love Sanity for offering robust APIs and supporting frontend frameworks like Next.js, Astro, and Nuxt. Since 2021, after a Sanity breakout year, the company has become one of the leader in content management software, plus, around 33,000 websites use Sanity for various needs, translating to a market share of approximately 0.2% in the top 1 million sites. On GitHub, Sanity platform has 1.3k followers and more than 2.7million of downloads that is really inspiring.We've picked Sanity CMS from many content management software options, and tried to evaluate why editorial teams leave old legacy content systems switching to headless ones, and to Sanity in particular. Here’s a succinct table with the main reasons for this choice:TriggerWhat They're LeavingWhat They GainOutgrowing rigid structuresGhost, WordPressFlexible content modeling, reusable content blocks Workflow frustrationPayload, self-hosted CMSesLive preview, draft management, no "push to staging"SEO plugin dependencyWordPress + YoastSchema built directly, predictable structured dataAI dev workflow needsAny legacy CMSSanity MCP for Claude/Cursor integrationContent management should be easy for everyone involved. This includes content managers, marketers, product managers, and developers. These team members maintain and configure the CMS for better usability. Sanity.io supports this balance well.

! NB (subjective opinion) 

Marketers really like the Sanity platform, even though it has a steeper learning curve than Storyblok or other content management software options. The built-in Content Agent is also a super helpful tool when you can create any request you need to get, and get your data inside the CMS. Engineers also appreciate structured content that allows organisations to use a clear, programmatic approach to content.Core Evaluation Criteria for Sanity Agencies
CriterionWhat "good" looks like1Official Sanity Partner StatusListed at sanity.io/agency-partners. Means Sanity has vetted them and they get direct platform access.2Production deployment depthAt least 20+ live Sanity sites, ideally with named clients you can verify.3GROQ + Studio expertiseThey write GROQ natively (not just GraphQL), build custom Studio plugins, and design schemas around editorial workflows — not just developer convenience.4Frontend specializationDeep Next.js, Astro, or React Native chops. A Sanity site without a fast, well-architected frontend is wasted.5Migration capabilityDocumented plans for moving content off WordPress, Drupal, Contentful, or AEM — with data mapping, transformation scripts, and parallel-run strategy.6ial UX focusCustom inputs, validation, scheduled publishing, role-based access, live preview. Separates dev shops from real Sanity partners.7Verified client reviews4.7+ on Clutch, with at least 10 reviews from named clients across industries.8Open-source contributionPlugins on the Sanity Exchange, blog posts, conference talks. Signals depth, not just availability.9Pricing transparencyPublished minimums, hourly bands, or productized packages — not "contact us."10Time-zone overlapAt least 4 hours of working overlap with your team. Async-only is fine; async-blind is not.11Contract structureFixed-scope, T&M, or retainer options — and willingness to fix bugs free during a warranty period.12Long-term retention80%+ client retention or repeat-engagement rate suggests they don't ship and disappear.A "yes" on at least 8 of these criterion is a credible Sanity partner. A "yes" on 11–12 is a top-tier one for your potential Sanity CMS development agency.
The Top 12 Sanity Development Agencies Worldwide  (2026 Shortlist)1. FocusReactive: Best Overall Sanity Agency & Headless CMS Agency 







HQ: London, Amsterdam, Warsaw, and Remote teamsTime zone: CET (UTC+1), with strong overlap into US East and APAC · Year founded: 2019 Team: 30; Senior consultants, 9+ years average industry experience Clutch rating: 4.9 / 5 with 100% positive feedback (16+ verified reviews) Completed projects in 9 countries Hourly rate: $50–$99Typical project range: $10K–$49K (also runs enterprise engagements)Best for: Companies that haven't picked a CMS yet and want a vendor-agnostic engineering partner who'll recommend Sanity, Storyblok, Contentful, or Payload based on the actual project — not their margin. Also the strongest pick when you need senior, hands-on Sanity engineers who can ship a production-grade, SEO-optimized headless build without a six-month onboarding curve.Typical projects: Headless CMS migrations (WordPress, Contentful, Drupal, AEM → Sanity), content-heavy marketing sites, Shopify Hydrogen storefronts paired with Sanity, AI SEO and LLM-optimized content systems, multi-locale and multi-brand rollouts, technical Next.js audits.Target audience: Marketing teams at scaling B2B SaaS AI/machine learning, manufacturing and engineering companies, consumer apps, franchising businesses, retail companies, e-commerce, and media organizations.Use cases: CMS platform selection and audit, end-to-end Sanity implementation with editorial UX baked in, Next.js builds with built-in SEO and Core Web Vitals, Shopify + Sanity headless commerce, large-scale migrations with content transformation, multi-locale rollouts, AI/agentic content workflows.Strengths: Senior-only team, deep open-source pedigree (Groqd, CMS-Kit), four official CMS partnerships, conference-organizing technical authority, transparent pricing, exceptional editorial UX thinking, high-budget-accuracy track record (90%+). 
Limitations: Not a fit for legacy PHP/Drupal custom builds or massive Fortune 100 multi-team programs where headcount alone is the requirement.2. iO - Official Sanity Agency PartnerHQ: Belgium (Mechelen) with offices in the Netherlands, Sweden, Denmark, and BulgariaTime zone: CET Year founded: 2005Team size: 1,000+ across multiple disciplines Clutch rating: 4.9Best for: European enterprises and government bodies that need a full-service "blended agency" — strategy, brand, content, marketing, AND technology — with Sanity slotting into a much larger digital transformation engagement.Typical projects: Enterprise digital platforms, brand and customer experience programs, cloud + data integration, Sanity used as the structured-content backbone inside larger marketing tech stacks.Target audience: Large enterprises, regulated industries, governments, organizations with complex multi-stakeholder digital programs.Use cases: Enterprise content infrastructure on Sanity, brand-and-tech programs, multi-property digital platforms, marketing infrastructure paired with cloud and data layers, customer experience design.Strengths: True full-service depth across strategy, design, content, and technology. Long enterprise track record, multi-country presence, strong governance and compliance instincts. 
Limitations: Premium pricing. Not the right fit for SMBs or boutique builds. Sanity is one of many CMSes they support — depth varies by project lead.3. We Make Websites











HQ: London, UK (also New York) Time zone: GMT/BST + ESTYear founded: 2008 (joined TechM XDS network in 2021) ·Team size: 50+ Specialty: Shopify Plus + Sanity headless commerceBest for: Premium and fast-growing DTC and B2B brands building design-led Shopify Plus stores where Sanity powers the content layer.Typical projects: Shopify Plus storefronts, headless Shopify + Sanity integrations, platform migrations to Shopify Plus, scalable conversion-optimized e-commerce.Target audience: Premium fashion, beauty, lifestyle, and DTC brands with global ambitions; mid-to-large e-commerce retailers.Use cases: Shopify Plus + Sanity headless builds, content-driven storefronts, multi-region commerce, Shopify replatforming, design-led e-commerce.
Strengths: One of the most experienced Shopify Plus agencies globally; backed by TechM XDS network's scale and stability since 2021; Sanity-named partner. 
Limitations: Shopify-centric — not the right pick if you don't want commerce attached. Premium pricing.4. Webstacks: Official Sanity Agency PartnerWebstack: Sanity Agency from USA










HQ: San Diego, CA, USA (remote-first) ·Time zone: PST (UTC-8) · Year founded: 2020 (current incarnation) Team size: ~50 Best for: B2B SaaS marketing teams that want a "website-as-product" partner — composable architecture, design system, ongoing iteration rather than one-shot builds.Typical projects: WordPress-to-Sanity migrations for B2B SaaS (e.g., Gong's full migration), multi-subsidiary design systems (ServiceTitan), marketing site redesigns aligned to PLG-to-sales motion shifts (Calendly).Target audience: Series B–pre-IPO B2B SaaS companies, AI/ML, FinTech, Web3, enterprise software.Use cases: Composable B2B website operations, design system rollout, CMS migration with marketing autonomy, multi-brand content infrastructure.Strengths: Verticalized in B2B SaaS (rare). Treats websites as products, not projects. Strong webdesign system practice. 
Limitations: Premium pricing. Not a fit for small marketing sites or e-commerce-first work.5. Codal - Official Sanity Agency Partner








HQ: Chicago, IL, USA (with offices in London and Bangalore)  Time zone: CST (UTC-6) plus IST coverage Year founded: 2009 Team size: 150+ Clutch: Strong positive sentiment, particularly on cost-vs-value Best for: Mid-to-large enterprise projects that need full-service capability — design + dev + project management — rather than a boutique engineering team.Typical projects: Enterprise composable web platforms, e-commerce on Sanity + Shopify Plus / BigCommerce, complex omnichannel content delivery, brand-consistent multi-channel rollouts.Target audience: Enterprises and large mid-market brands in retail, CPG, healthcare, manufacturing.Use cases: End-to-end enterprise digital experiences, UX research + Sanity architecture, multi-channel content (web/app/IoT), composable architecture migrations.Strengths: Full-service depth (design, strategy, dev, QA), large team, strong PM, enterprise-ready processes. 
Limitations: Less Sanity-specialized than boutique shops. Higher pricing than Eastern European agencies.6.  Monogram Agency Inc. 5000 (2022, 2023): Official Sanity Agency PartnerMonogram Agency












HQ: Atlanta, GA, USATime zone: EST (UTC-5)Year founded: ~2017Team size: 20–30Best for: Design-led composable websites where pixel quality and editorial experience matter as much as the engineering.Typical projects: Composable web apps, beautiful brand sites, BigCommerce/Shopify Plus + Sanity headless stores, Svelte/Astro/Next.js fronts.Target audience: Design-conscious brands, AI/dev-tools companies, scaling startups, e-commerce brands.Use cases: Brand redesigns with Sanity backend, composable e-commerce, design-system-driven sites, dev-tools company sites.Strengths: Exceptional design execution, modern stack adoption (Astro, Svelte, Vercel), composable-first. 
Limitations: Smaller team caps capacity for very large enterprise programs.7. Nearform (former Formidable): Official Sanity Agency Partner HQ: Seattle, WA, USA (also Denver, Phoenix, London, Toronto) Time zone: PST + globalYear founded: 2013 (acquired by Nearform)Team size: Global, 100+Project cost minimum: ~$30,000+Best for: High-traffic, performance-critical React applications where Sanity is the content layer behind a serious engineering project.Typical projects: GROQ optimization at scale, ISR/edge-rendering for large Sanity sites, design systems, React Native + Sanity (Starbucks-style style guide systems), commerce platforms (e.g., the work that contributed to a $3.3B valuation acquired by Walmart).Target audience: large e-commerce, media companies, enterprises needing hard engineering chops.Use cases: Engineering-led Sanity implementations, code audits, React/React Native consulting, GraphQL/GROQ optimization, open-source tooling.Strengths: Deep React + open-source pedigree. Now backed by Nearform's global engineering scale.
Limitations: Sanity is one tool of many; schema decisions can favor developer convenience over editor usability. Premium pricing.8. Vyuh Technologies: Official Sanity Agency Partner 









HQ: India Time zone: IST (UTC+5:30)  Year founded: ~2022Team size: Boutique Best for: Companies that want Sanity to power mobile apps (Flutter) and IoT — not just websites, with a CMS-driven framework approach.Typical projects: Flutter mobile apps backed by Sanity, modular CMS-driven app architectures, large-scale enterprise content modernization, custom Studio plugins.Target audience: Enterprises modernizing legacy content stacks, mobile-first companies, teams needing iOS + Android + web from one content source.Use cases: Sanity + Flutter mobile apps, CMS-driven app frameworks (open-source Vyuh Framework), enterprise migrations, custom editorial UIs.Strengths: Distinct mobile-first positioning, open-source framework, enterprise-architect founder. 
Limitations: Smaller team. Less of a fit if you only need a marketing website.9. Represent: Sanity Agency PartnerRepresent Agency











HQ: Oslo, Norway (also London) · Time zone: CETYear founded: ~2016Team size: Boutique Best for: Headless Shopify + Sanity e-commerce builds where business advisory and CRO matter alongside engineering.Typical projects: Headless Shopify storefronts powered by Sanity, custom content models for ingredient/claim/study databases (Vitamail), AI-assisted content translation pipelines inside Sanity Studio, multi-market expansions.Target audience: Ambitious DTC and e-commerce brands, especially in the Nordics and Silicon Valley, that want a small senior team rather than an agency machine.Use cases: Headless Shopify + Sanity, CRO-driven storefronts, complex content models, international Shopify expansion, GPT-integrated Studio workflows.Strengths: Senior-only, business-first approach, Sanity-pioneer status, transparent client communication. 
Limitations: Capacity-limited boutique. Not a fit for non-commerce enterprise content systems.10. Commerce-UI
HQ: Remote (European base)Time zone: CETYears in business: 8+ Team size: Boutique Sanity partner status: Official Sanity Agency Partner; Shopify Plus PartnerBest for: Premium fashion, lifestyle, luxury, and culture brands where the storefront has to function as both a sales channel and a brand asset.Typical projects: Headless Shopify Plus on Hydrogen or Next.js, complex product configurators, B2B/B2C storefronts, large platform migrations, editorial content systems on Sanity that give brand teams real publishing control without developer dependency.Target audience: Design-first, brand-led fashion and lifestyle companies; culture and luxury brands.Use cases: Award-winning headless Shopify storefronts, premium brand sites, Sanity-powered editorial commerce, complex configurators (3D, AR, dynamic pricing).Strengths: Outstanding design execution, deep technical Hydrogen expertise, founder-led delivery, marquee culture/fashion clients, multiple major industry awards. 
Limitations: Boutique capacity. Not the right fit for B2B SaaS or non-commerce enterprise content programs.11. 85SIXTY - Sanity Partner Agency







85Sixty Sanity Agency
HQ: California, USATime zone: PST Years in business: 16+ in e-commerce development Stack: Sanity CMS, Gatsby, Next.js, Shopify Hydrogen, WordPress, NYLA, PACK, Shogun, Builder.ioBest for: Shopify and Shopify Plus brands that want measurement, CRO, and analytics rigor combined with headless Sanity content, not a pure-development shop.Typical projects: Shopify Plus theme migrations, Shopify 2.0 work, Hydrogen + Sanity headless builds, complex 3rd-party integrations (POS, ERP, PIM, OMS), CRO audits and roadmaps, GA4/GTM/MMM analytics implementation.Target audience: Established Shopify and Shopify Plus brands focused on measurable revenue lift, scaling DTCs with international ambitions, and retailers needing analytics maturity alongside development.Use cases: Shopify + Sanity headless commerce, Shopify Plus migrations, advanced Shopify integrations (Celigo middleware, custom apps), international expansion, CRO and A/B testing programs.Strengths: Rare combination of dev + CRO + analytics + Google partnerships. 16+ years in e-commerce. Strong middleware and integration capability. Limitations: Shopify-and-CRO-anchored, not a generalist Sanity shop. Not a fit if you don't have an e-commerce backend.12. Social Animal











Codal Sanity Agency
HQ: Remote-first, US-based 
Time zone: US Eastern primaryYear founded: Recent (post-2020 incarnation) Team size: Boutique Sanity partner status: Sanity-first agency; ecosystem contributor Project minimum: $15,000 standard / $40,000+ enterprise Best for: Sanity-first builds with frontend flexibility (Next.js or Astro) and complex multi-brand or multi-locale content models.Typical projects: Headless CMS architecture, content-modeling-heavy projects, multi-brand setups, migrations from Contentful/WordPress/AEM, architectural reviews.Target audience: B2B SaaS, mid-market e-commerce websites, media companies that want Sanity as a strategic platform, not just a CMS.Use cases: Complex schema architecture, multi-locale rollouts, architectural audits, Sanity-first builds for editorial-heavy products.Strengths: Sanity-first commitment, solid editorial UX thinking, frontend flexibility. 
Limitations: Smaller scale, shorter public client list than the bigger agencies on this list.Side-by-Side Sanity Agency Comparison Table
AgencyHQTime ZoneFoundedTeamBest ForMin. ProjectSanity Specialization1FocusReactiveRemote (EU)CET2019Senior boutiqueSanity + Next.js engineering excellence, vendor-agnostic CMS selection$10KSanity-deep, multi-CMS partner2iOBelgium / NLCET20051000+Enterprise digital transformation across 5 countries$$$$Generalist + Sanity3We Make WebsitesLondon / NYGMT/EST200850+Premium Shopify Plus + Sanity headless$$$$Shopify + Sanity4WebstacksSan Diego, USPST2020~50B2B SaaS website$$$Composable web5CodalChicago, USCST + IST2009150+Enterprise full-service$$$$Generalist + Sanity6MonogramAtlanta, USEST~201720–30Design-led composable$$$Composable-first7NearformSeattle, USGlobal2013100+Engineering-led performance$30K+Multi-stack8Vyuh TechnologiesIndiaIST~2022Boutique agencySanity + Flutter mobile apps$$Sanity + Mobile9RepresentOslo + LondonCET~2016BoutiqueHeadless Shopify + Sanity Nordic/SV$$$Sanity + Shopify10Commerce-UIRemote (EU)CET~2017BoutiquePremium fashion/luxury Shopify headless$$$$Shopify + Sanity1185SIXTYCalifornia, USPST~2008Mid-sizeShopify + Sanity + CRO + analytics$$$Shopify + Sanity12Social AnimalRemote, USESTRecentBoutiqueSanity-first multi-brand$15KSanity-firstDecision Tree: Which Agency Fits Your Situation?Use this to narrow your shortlist to 2-3 agencies before you book intro calls.
START → What's your project type? ├── You haven't picked a CMS yet (Sanity vs Storyblok vs Contentful vs Payload) │ → FocusReactive (vendor-agnostic, partners with all headless CMSs) │ ├── Marketing site for B2B SaaS (Series A+) │ ├── US-based team, want a "website-as-product" partner │ │ → Webstacks (best fit) or Monogram (design-led) │ └── Want senior EU specialists, OK with async │ → FocusReactive │ ├── Headless e-commerce (Shopify Plus + Sanity) │ ├── Premium fashion / luxury / culture brand │ │ → Commerce-UI or We Make Websites │ ├── US East Coast DTC, fashion or lifestyle │ │ │ ├── Nordics / Europe │ │ → Represent (Oslo) │ ├── US-based, want CRO + analytics rigor too │ │ → 85SIXTY │ └── Premium tier, US, complex storefront engineering │ → Nearform or Codal │ ├── Enterprise content platform (Fortune 1000 / multi-brand) │ ├── European enterprise, full-service (brand + tech + strategy) │ │ → iO │ ├── US full-service (design + strategy + dev) │ │ → Codal │ ├── Pure engineering muscle │ │ → Nearform │ └── Sanity-first specialist │ → FocusReactive Agency │ ├── Mobile app (Flutter / React Native) backed by Sanity │ → Vyuh Technologies (Flutter) or FocusReactive (React Native) │ ├── Migration from WordPress / Drupal / AEM / Contentful │ ├── Want vendor-agnostic CMS selection first │ │ → FocusReactive │ ├── B2B SaaS context │ │ → Webstacks │ └── Premium engineering scale │ │ ├── Performance-critical (Core Web Vitals, edge, ISR) │ → Nearform │ │ └── Multi-locale, multi-brand, complex schema architecture → Social AnimalHow to Run a Sanity Agency Selection Process (a quick playbook)Write a one-page brief before you contact anyone. Include: what you're building, current stack, content volume, editor count, target launch, integrations (CRM, search, commerce), and your budget range. Without this, every partner's conversation drifts.Shortlist 3 agencies from this list using the decision tree. Do not contact more than 4 — you'll waste your own time.Ask each one the same five questions so answers are comparable:Show me a Sanity schema you've shipped that's similar to ours.How do you handle live preview, scheduled publishing, and role-based access?What's your migration plan for content from [your current CMS]?What's your warranty period after launch and what does it cover?Who specifically would be on this project (names, seniority, hourly rate)?Request a small paid discovery ($2K–$5K) before signing a full build. A discovery week reveals whether they actually understand your problem — and gives you a deliverable even if you walk away.Reference-check by phone, not email. Ask former clients: "What would you do differently if you hired them again?" Email replies are diplomatic; phone calls are honest.Sign with a clear scope, fixed milestones, and a kill clause at each milestone. Time-and-materials with no milestones is where projects bleed.Sanity Agency Main CaveatsA few honest caveats about the general approach to finding Sanity agency:Time zones are underrated. A senior Croatian, Belarusian, or Polish, or any remote European team you can talk to live for 4 hours a day will out-deliver a US Sanity developer that bills 3× and replies on Slack within a business day. Pick for overlap and convenience, not just postcode.Rankings move fast. Clutch ratings shift, agencies grow or shrink, partnerships start and end. Verify every data point before hiring — especially partner status on sanity.io/agency-partners. Specialization beats reputation for Sanity work. Any development company can generate hundreds of positive Google reviews or whatever, and these public directories should be checked twice before contacting for a Sanity project. The Sanity ecosystem (GROQ, Studio, schema patterns) and official partnership with engineering agencies around the world is deep enough that depth matters more than brand.Sanity CMS Popularity in eCommerceSanity CMS is actively used as a preferred headless CMS for ecommerce use cases and composable commerce architectures. And this is a valid choice, especially for mid-market and enterprise DTC brands looking to move away from monolithic Shopify themes toward headless storefronts.Here is an interesting infographic on popular content management systems for ecommerce, made by https://www.reddit.com/user/HT_Blue/, a visual breakdown showing where Sanity CMS stands among other content management platforms.Source: ww.dxpscorecard.comHere you can see that Sanity is really standing apart among other content software like DatoCMS, Strapi, and others. The author’s standards by which he has created are the following:Platform healthDeveloper ExperienceContent PowerMarketing FitShowing Open SourceQuick FAQ on Sanity CMSWhat is Sanity CMS?Sanity is a headless content management system that stores content as structured, reusable data instead of pre-rendered pages. It ships with two parts you'll hear about constantly: Sanity Studio, an open-source React-based editing environment that teams can fully customize, and a hosted Content Lake that serves your data over APIs (GROQ and GraphQL). Sanity Inc. is dual-headquartered in San Francisco and Oslo, Norway, and the platform powers content for brands like PUMA, AT&T, Burger King, Tata, Spotify, Shopify, and Figma.Is Sanity a CMS?Yes, Sanity is a content management system, but a headless one, that is called API-first CMS. Unlike WordPress, it doesn't ship a frontend. You model your content as code, edit it in Studio, and query it from any frontend (Next.js, Astro, React Native, Flutter, native apps, IoT). Sanity now markets itself as a "Content Operating System," reflecting its push beyond traditional CMS boundaries into AI workflows and structured content for agents.Is Sanity.io free?Sanity has a generous free tier that covers Sanity Studio, the hosted APIs, and collaborative editing, which is enough for solo developers, small sites, and most prototypes. Paid plans (Growth, Enterprise) layer on higher API quotas, SSO, advanced roles, audit logs, and dedicated support. Free to start, paid as you scale.How much does Sanity impementation services cost?Everything depends on your project and scope of work, but in the USA we can see the following average rates for Sanity developers:Hourly rates: $60-$150/hourMonthly rates: $8,000-$15,000/monthAverage annual salary: $129,348Upwork median rate: $63/hour (typically $51-$75 range)Senior React developers in San Francisco/Palo Alto: $152,000-$230,000 base salaryIs Sanity better than WordPress?Sanity wins on flexibility, multi-channel delivery, real-time collaboration, structured content reuse, and developer experience. WordPress wins on out-of-the-box themes, plugin ecosystem, non-technical setup, and pure blogging speed. 

A useful rule of thumb:Pick Sanity CMS when you have multiple frontends, structured product/editorial data, an in-house dev team, or plans for omnichannel and AI-readable content.Pick WordPress when you need a blog or marketing site with a small team, no developers, and no complex content relationships.AfterwardsIf you have your own specific criteria for choosing a Sanity agency, please share in the comments below. We need your honest feedback and appreciate any experience about hiring Sanity developers.Sources include Clutch verified reviews, Sanity Agency Partners directory, agency-published case studies, Crunchbase, TechCrunch, and direct agency websites. Data verified May 2026