Skip to content
Sanity
Get started
  • Sanity Studio - Flexible editing environment
  • Content Lake - Real-time database
  • Developer experience - Tooling you love
  • Structured content - The philosophy behind Sanity
  • Review changes - View edits & rollback instantly
  • Image pipeline - On-demand transformations
  • E-commerce - Better shopping experiences
  • Marketing sites - Control your story
  • Products & services - Innovate and automate
  • Mobile apps - Content backend for every OS
  • Aether - Unique digital shopping experience
  • Morning Brew - Omnichannel media distribution
  • InVision - Delivering exceptional customer experiences
  • DataStax - Personalization for global audience
  • React
  • Gatsby
  • Next
  • Nuxt
  • Eleventy
  • Netlify
  • Vercel
  • Algolia
  • Documentation
  • Reference
  • Guides
  • Resource library
  • Headless CMS
  • Tools & plugins
  • Project showcase
  • Schemas & snippets
  • Agency partners
  • Technology partners
  • Get support
  • Share your work
  • 5 Disadvantages Of Wordpress That Are Holding You Back
EnterprisePricing
Contact salesLog inGet started

Next.js CMS

The Best CMS for Next.js

Sanity is an open-source, API-based CMS that pairs perfectly with Next.js.

  • Be on the cutting edge of JavaScript across front and backend.
  • Write serverless calls to the Sanity API in Next.js
  • Connect your app to a performant, extensible CMS in only a few lines of code.

It's the fastest, most developer-friendly way to build and ship your Next.js app or site.

Get started Contact sales

Powering exceptional digital experiences everywhere

NetlifyNikeFigmaCloudflareSonosFlexMovemberreMarkableCondé NastSkimsBrex

Sanity and Next.js is the winning combination

  • One stack, all React

    One stack, all React

    Sanity and Next.js are both written in React. Use all the React packages and integrations you know and love. Anywhere you need to. Backend to frontend. All React.

  • Data where you need it

    Data where you need it

    Sanity pairs perfectly with Next.js data fetching and rendering patterns. SSG, SSR, ISR, RSC — it’s all possible. Plus we have the docs and examples you need to get it done!

  • Data how you want it

    Data how you want it

    Use Sanity’s powerful query APIs to filter, sort, and shape your data on the server. Give your frontend exactly the data it needs! Real- time or build time.

  • Live previews

    Live previews

    No more waiting for slow builds. Setup previews for your Next.js site directly inside of Sanity so you can catch that typo before hitting publish!

  • Embeddable studio

    Embeddable studio

    Sanity is a standalone React application and can be embedded directly inside your Next.js project. No more awkward urls. Just content editing wherever you want it.

  • Official integration

    Official integration

    Sanity has an official toolkit for NextJS built to make integrating Next.js and Sanity a breeze. We take care of the hard stuff so you can focus on the fun stuff!

Fully configured Next.js templates

With Sanity's Next.js templates, you can deploy a full-stack content app in a few short clicks. Be up and running in 30 seconds with our Netlify and Vercel integrations.

Clean Next.js site with Sanity Studio

A clean example of Next.js with embedded Sanity ready for recomposition.

  • Next.js
  • Vercel

Personal Website with Built-in Content Editing

A Sanity-powered personal website with built-in content editing and instant previews.

  • Vercel
  • Next.js

Blog with Built-in Content Editing

A Sanity-powered blog with built-in content editing and instant previews.

  • Vercel
  • Next.js
Browse all templates

Or get started using the CLI

Combine Next.js's getStaticProps() with Sanity's native JavaScript client and connect your front end to a user-friendly, fully-featured CMS in the time it takes to make coffee.

  1. Deploy an instance of Sanity studio (npm create sanity@latest)
  2. Create a Next.js app, and begin fetching data for static site generation in a tiny amount of code.
  3. Iterate on blazing-fast content at record speed.

This is all the code you need. Seriously.

const sanityClient = require("@sanity/client");
export const client = sanityClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_ID,
  dataset: "production",
  useCdn: true,
});
export default function Home({ post }) {
  return (
    <div>{post.content}</div>
  );
}

export async function getStaticProps({ params }) {
  //use Sanity's home-grown query language GROQ to build anything you can imagine
  const post = await client.fetch('*[_type == "post"][0]');

  return {
    props: {
      post,
    },
  };
}
Sanity Studio v3

Ready for React 18 and Next.js 13

The new React 18 and Next.js 13 releases are driving the future of JavaScript based web development with the introduction of React Server Components and the app directory.

Sanity Studio v3 is ready for this dynamic future. It includes full TypeScript coverage, total UI customization, React 18 support, improved accessibility, better search and more.

The right tools

Best in class developer experience

Give everyone on your team something to celebrate. Next.js puts the essentials of modern React development at your fingertips. With Sanity, get a backend that can keep up with it, and enjoy a performant, user-friendly CMS with the extensibility of a managed database.

Next-Sanity toolkit

Get a 100-hour head start

Use our official next-sanity toolkit to supercharge your Next.js project. It will help you to implement live previews, image fetching, webhook validation, and more!

When you pair Next.js and Sanity you are making a choice with official support and guaranteed long-term maintenance.

We are building the happy path for you!

Rated #1 by developers

Developers love working with Sanity and Next.js

Zahra Dargahi

Senior Frontend Developer @ IAG

I started using Sanity for a friend's startup project. As I am using react components. Loving it! It allows developers to define a simple schema for content that is easily deployed using command line interface.

Read tweet

Rayed Benbrahim

Global Partner Solutions Architect Lead for Capgemini

After testing Strapi and Prismic, I made the choice to focus on Sanity. Their documentation was simple enough to ensure a quick start, the existing React or NextJS libraries made my job a lot easier.

Read review

Eivind Lindbråten

Full Stack Developer @ Mint

I'm using Sanity with Next.js, and I just tell clients "this is what I work with, and what I can guarantee lets me build the best products".

Read tweet
Read more reviews about Sanity and Next.js
Do-it-all API

Data how and where you need it

The Sanity API pairs perfectly with Next.js data fetching patterns from the original getServerSideProps to the brand-new app directory.

Use GraphQL or the GROQ query language to intelligently build queries that can filter, sort and transform your data on the server.

*[_type == "cms" && awardWinner == true]

Live previews

Preview your content before publishing

With your own repo, studio, and front end published, wire up Next.js and Sanity's real-time serverless previews and see exactly what your content looks like before it's published.

"I am using Sanity with Next.js. I don't think there is a more flexible CMS out there."

Max Karlsson

Frontend Tech Lead at Culture Kings

Voted #1 by developers

In the 2022 JAMStack Community Survey, Sanity has the highest satisfaction score for content platforms.

It's the fastest, most flexible way to structure and deliver content to digital products.

Get started and find out why

A dream stack for beginner and advanced devs alike

There's no better stack to learn the basics of modern JAMstack development.

  • Next abstracts the hardest bits of front-end app dev, while still leaving you full freedom.
  • Sanity removes the headaches of devops, self-hosting, and rigid content models and gives you total creative control.

Learn more with our own Sanity crash course

Next.js resources

Take advantage or a large community of developers

Sanity offers a wide range of integrations, guides, templates, plugins and themes through the Sanity Exchange. There you'll find out how to add user auth to across your React app with a plugin, deploy to Vercel straight from your CMS or style your site with Tailwind.

Find resources created by the Sanity team and the community to easily customize your workflow with Next.

Start building with Sanity and Next.js

Generous quota included. Pay-as-you-go for users, usage and features on all plans. Host a DIY studio for free, or serve enterprise content with confidence.

Get started for freeContact sales

Last updated March 30, 2023

Platform

Structured ContentDeveloper experienceContent LakeSanity StudioSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

Documentation
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
Resource library
  • Agency partners
  • Technology partners
  • Blog Template
  • Personal Website Template
  • Developer Portfolio Templates
  • All Templates
Case Studies
  • Headless CMS
  • What is an API CMS
  • Static Sites 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • What is a DXP?
  • Typescript 101
  • Content as a Service
  • Ecommerce SEO
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS

Company

Contact SalesEnterpriseCareersTerms of ServiceAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023