Best headless CMS for Next.js in 2026: Sanity vs Contentful vs Payload vs Storyblok

May 14, 2026 · 8 min read

Choosing the best headless CMS for a Next.js project in 2026 is not a one-size-fits-all decision. I have shipped production projects on all four platforms covered here — Sanity, Contentful, Payload, and Storyblok — and each one has a clear home and a clear set of pain points. This post breaks them down honestly.

What I evaluated and why it matters

I judged each CMS on six criteria that actually affect delivery time and client satisfaction:

  1. Query language / API — how much round-trip overhead you take on in a Next.js App Router data fetch.
  2. Schema DX — how fast you can iterate on content models without breaking existing queries.
  3. Next.js App Router support — native RSC patterns, draft mode, on-demand ISR.
  4. Pricing — where the walls are as your client scales.
  5. Studio / editor experience — how quickly a non-technical editor becomes self-sufficient.
  6. Self-hosted vs cloud — who owns the data and what that costs operationally.

Sanity

Query language / API: GROQ is the best query language available in any CMS for Next.js. You pull exactly the fields you need, dereference references inline, and handle conditionals without multiple fetches. The @sanity/client with useCdn and tag-based revalidation slots cleanly into route handlers and RSC fetch calls.

Schema DX: TypeScript-first schema files checked into your repo. Sanity TypeGen generates inferred types from your GROQ queries, so a schema change surfaces type errors before you deploy. Iteration speed is high.

App Router support: First-class. draftMode(), revalidateTag(), and the Presentation tool for visual editing all work without adapter shims. The next-sanity package handles the plumbing.

Pricing: Free tier is generous (two users, 500k API requests/month). The first wall hits at team size — the Growth plan at $15/user/month is fine for agencies billing it to clients, but it can surprise a startup that suddenly has five internal editors.

Studio / editor experience: Sanity Studio v3 is the most customisable editor on this list. Portable Text, image hot-spot, and the structure builder give editors a focused interface. The flip side: you build what you need, which means initial setup time.

Self-hosted vs cloud: Studio is open source and can be embedded in your Next.js app or hosted separately. The content lake is cloud-only unless you are on an enterprise contract.


Contentful

Query language / API: REST and GraphQL. The GraphQL API is well-typed and predictable, but deeply nested content models generate expensive queries. There is no equivalent of GROQ's single-query dereferencing — you often end up with multiple requests or overfetching.

Schema DX: The web UI content model editor is approachable but not code-first. There is no built-in way to version schema alongside your codebase. Contentful Merge (formerly Content Type Merger) helps in CI but adds tooling overhead.

App Router support: Works, but relies on Contentful's Content Preview API for draft mode. The setup is documented but not as seamless as Sanity's Presentation tool. No official App Router SDK as of May 2026 — you wire it yourself.

Pricing: The free tier is limited (5 users, 25k records). Paid plans start at $300/month for teams, which is a real threshold for small startups. Enterprise pricing is opaque. This is where Contentful loses most small to mid-size projects.

Studio / editor experience: The Contentful web app is polished and familiar to non-technical teams. Editors who have used WordPress or Notion get comfortable quickly. Rich text is less flexible than Portable Text but causes fewer surprises.

Self-hosted vs cloud: Cloud only. No self-hosting path at any tier.


Payload CMS

Query language / API: REST and GraphQL auto-generated from your collection schemas. The local API (direct MongoDB/Postgres queries when running Payload in the same Node process) is genuinely fast and removes the HTTP layer entirely for SSR — a significant advantage.

Schema DX: TypeScript config files, fully code-first. Collections and globals are defined in payload.config.ts, and types are generated automatically. This is the tightest schema-to-type loop of any CMS here.

// payload.config.ts (simplified)
import { buildConfig } from 'payload/config'
import { Posts } from './collections/Posts'
 
export default buildConfig({
  collections: [Posts],
  db: postgresAdapter({ pool: { connectionString: process.env.DATABASE_URI } }),
  editor: lexicalEditor({}),
})

App Router support: Payload 3.x runs inside a Next.js App Router project as a plugin — the admin UI and your front-end share the same next process. This is architecturally clean. Draft mode and ISR revalidation are handled with standard Next.js APIs because Payload is Next.js.

Pricing: Open source, MIT licensed. You pay for your own hosting (Vercel, Railway, Render, VPS). At volume, self-managed infra costs less than SaaS CMS plans, but operational burden is yours.

Studio / editor experience: The Payload admin is functional and customisable but noticeably less polished than Sanity Studio or Contentful. Lexical-based rich text is solid. Non-technical editors need more onboarding.

Self-hosted vs cloud: Fully self-hosted. Payload Cloud exists as a managed option but is not widely adopted yet. This is the major differentiator — you own the database.


Storyblok

Query language / API: REST API with a CDN delivery layer. The Content Delivery API returns nested JSON matching your component tree — convenient for visual editors but verbose for headless consumption. There is no query language; you get the full document and filter client-side or in your fetch logic.

Schema DX: Components (analogous to schemas) are defined in the Storyblok UI, not in code. A storyblok-generate-ts tool can produce types, but the schema lives in the cloud, not your repo. This is the weakest DX for developer-heavy teams.

App Router support: The @storyblok/react SDK has been updated for RSC but still leans on client components for live preview. Visual editing (the main reason to choose Storyblok) requires a client-side bridge, which adds hydration cost.

// app/[slug]/page.tsx — Storyblok RSC fetch pattern
import { getStoryblokApi } from '@storyblok/react/rsc'
 
export default async function Page({ params }: { params: { slug: string } }) {
  const client = getStoryblokApi()
  const { data } = await client.get(`cdn/stories/${params.slug}`, {
    version: 'published',
  })
  // data.story.content is the full component tree
  return <StoryblokStory story={data.story} />
}

Pricing: Free tier is very limited (1 user, 1 space). The entry paid plan starts around $99/month. The pricing model is per-space and per-user, which scales awkwardly for agencies managing many small client sites.

Studio / editor experience: Storyblok's visual editor is the best on this list for marketing teams that want to build pages without developer involvement. The block-based composability is genuinely powerful for landing page workflows.

Self-hosted vs cloud: Cloud only.


Side-by-side summary

| | Sanity | Contentful | Payload | Storyblok | |---|---|---|---|---| | Query language | GROQ (excellent) | GraphQL/REST (good) | Local API / REST (good) | REST (basic) | | Schema in code | ✓ | ✗ | ✓ | ✗ | | App Router native | ✓ | Partial | ✓ (it is Next.js) | Partial | | Free tier usable | ✓ | Limited | ✓ (self-host) | ✗ | | Self-host option | Studio only | ✗ | ✓ fully | ✗ | | Editor UX | High | High | Medium | Very high (visual) |


Recommendation matrix by team type

Solo developer / freelancer building client sites: Sanity. The free tier covers most client projects, Studio embeds in your Next.js repo, and GROQ keeps data fetching clean. The schema-in-code workflow means you can hand off a Git repo with no external CMS config to chase down.

Agency running 10+ client sites: Sanity for content-heavy sites. Storyblok if the client insists on drag-and-drop page building and has a marketing team that needs to self-serve layouts. Avoid Contentful at this tier — the per-user pricing becomes punishing across multiple client accounts.

Startup (1–15 person team, VC-backed or bootstrapped): Payload if you have a backend engineer who can manage a Postgres database and want zero vendor lock-in. Sanity if you want to move fast and the content lake cost is acceptable. Contentful only if the team is non-technical and has budget — the $300/month entry point is real.

Enterprise / large product team: Contentful or Sanity Enterprise. Contentful has a longer track record in enterprise procurement conversations. Sanity's enterprise tier includes SSO, audit logs, and private datasets. Payload is viable at enterprise scale if you have devops capacity and need data residency control — several regulated-industry teams are moving this direction in 2026.


The call I actually make

For a new Next.js project in 2026, I default to Sanity unless the client has a specific reason to go elsewhere. GROQ with TypeGen produces the cleanest App Router data layer I have worked with. Payload is the right call when self-hosting is a hard requirement or when the project is a full-stack app rather than a content site. Storyblok earns its place when the deliverable is a page-building tool for marketers, not a content API for developers. Contentful is hard to recommend for new projects started today — the pricing curve and the lack of code-first schemas make it the least competitive option in the 2026 landscape.

Related posts

All posts →