What does Sanity do on a marketing site?
Sanity stores your website's content as structured data and gives editors a customizable workspace, Sanity Studio, to write and manage it. The site then pulls that content through an API and renders it however the design needs. Content and presentation stay separate, so the same content can feed the website, the product, docs or an app.
- Structured content: pages, blog posts, case studies, authors, FAQs and settings as typed documents with defined fields.
- Sanity Studio: a React-based editing app you can tailor to your team, hosted by Sanity or inside your own site.
- GROQ queries: Sanity's query language fetches exactly the fields each page needs.
- Portable Text: rich text stored as structured data, so it can be rendered with your own components.
- Real-time collaboration: several editors can work on documents at once and see each other's changes.
- Image pipeline: images served through Sanity's CDN with cropping, hotspots and resizing.
For a startup, the main reason to choose Sanity is editing freedom on a coded site. You get a fast, custom Next.js front end without making marketing wait on engineering for every change. If you're new to the idea, our headless CMS explainer for non-developers is a good place to start.
Does Sanity work with Next.js, Framer and Webflow?
Sanity works best with Next.js, and it's usually the wrong choice for Framer or Webflow sites. Framer and Webflow each have their own CMS built into the visual editor. Using Sanity with them means syncing content into that native CMS, which duplicates your content and loses most of what makes Sanity worth paying for.
Next.js | Framer | Webflow | |
|---|---|---|---|
How Sanity connects | Queried directly at build time or on request | Synced into Framer's CMS by a plugin or script | Synced into Webflow's CMS through its API |
Live preview | Yes, with Draft Mode and Sanity's Presentation tool | No, editors preview in Framer after sync | No, editors preview in Webflow after sync |
Visual editing | Click-to-edit overlays on the real page | Not available | Not available |
Content in one place | Yes | No, it lives in two systems | No, it lives in two systems |
Our recommendation | Strong fit | Use Framer's CMS instead | Use Webflow's CMS instead |
There are exceptions, such as a company that already runs its product content in Sanity and wants a Webflow marketing site to show part of it. We'd scope that sync carefully. For most marketing sites, the honest advice is to pick one CMS and keep it. Our guides to keeping Framer design and moving content to a headless CMS and when the Webflow CMS isn't enough cover the edge cases.
How do we set up Sanity with Next.js?
We set up Sanity as part of the build, starting from what your editors need to change and ending with a handover they can use alone.
Model the content
We define document types and fields around your content, such as pages, use cases, posts, authors and SEO settings, rather than around one design's layout.
Configure the Studio
Clear field names, help text, validation and a desk structure that groups content the way your team thinks about it.
Build the front end
Next.js pages fetch content with typed GROQ queries, and Portable Text renders through the same components as the rest of the design.
Wire preview and visual editing
Draft Mode and Sanity's Presentation tool let editors see unpublished changes on the real page and click through to the field.
Handle publishing
Webhooks trigger cache revalidation, so published changes appear on the live site quickly without a full rebuild.
Train and hand over
A walkthrough with your editors and short written notes on adding pages, posts and images.
Our guides to live preview and visual editing in headless CMS setups and content modeling for a SaaS site go deeper on the two steps teams most often skip.
Sanity or Payload for a Next.js marketing site?
Both are good choices, and we use both. Sanity suits teams that want a hosted content platform with strong real-time collaboration and a polished editing experience. Payload suits teams that want the CMS running inside their own Next.js app, on their own database and hosting. Designify's own site runs on Next.js with Payload, so we know the trade-offs first hand.
Pros
- Sanity: hosted, so there's no CMS database or server for your team to run
- Sanity: real-time collaboration and a mature visual editing workflow with Next.js
- Sanity: flexible Studio customization for larger editorial teams
- Sanity: content can be reused across website, product and apps
Cons
- Sanity: pricing grows with usage and seats, so check the current plan page
- Sanity: content lives on a third-party platform rather than in your own database
- Sanity: GROQ is another query language for your developers to learn
- Sanity: for a small site with two editors, it can be more than you need
Our full comparison of Sanity vs Payload for Next.js marketing sites sets out who should pick which. Pricing and plan limits change, so check Sanity's current plans before you commit.
What are the common Sanity setup mistakes?
Most Sanity problems show up months after launch, when the team that edits the site is not the team that built it. These are the mistakes we design out.
- Modeling pages, not content: a field called 'hero section 2 subtitle' locks content to one layout and breaks at the next redesign.
- Too many page-builder blocks: dozens of loosely defined blocks let editors build off-brand pages. A short list of well-designed blocks works better.
- No preview: editors publish to check their work, and mistakes go live.
- Stale pages: caching without revalidation, so published changes don't appear and editors lose trust in the CMS.
- Missing SEO fields: no place for titles, descriptions, social images or canonical URLs.
- No validation: required fields left empty and images uploaded without alt text.
What does a Sanity website cost?
A Next.js site with Sanity is part of our website package, $8,000 fixed for up to six pages, then $500 per extra page. It includes copy, custom design, the content model, Studio setup, the Next.js build and animation. Sanity's own subscription is billed by Sanity, separately.
Moving from another CMS is extra work. Migration is scoped on the intro call, and we include redirects and SEO checks in any migration we take on. Our guides to Webflow to Next.js and Sanity and Contentful to Sanity cover what a move involves. If you're still choosing a stack, our Next.js development page explains when code is the right call. The next step is a free 30-minute call.