The most complete headless CMS to work with Next.js

Worldwide CDN

If Next.js is serverless, so your CMS should be‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

If your content is always fetched from a single geographical location, there’s no point in building a website with a serverless architecture, that is why Dato CMS and Next.js are so powerful together.‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

DatoCMS delivers your content from a CDN with edges all around the globe, minimizing latency and providing the fastest content delivery on the market.

GraphQL Content API

Ask for what you need, get exactly that

Our Content Delivery API is built with GraphQL. That means powerful developer tools, multiple resources in a single request and complete control over the data your website downloads. The perfect solution for a Next.js CMSRead more about our GraphQL API

{}

Next.js‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌ images

State of the art for responsive and progressive images‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

Serving optimized images is incredibly hard, but using our GraphQL Content API and our React component, you can implement lazy loaded, responsive images in one line of code. Avoid any layout jumping, offer instant previews of images while they load. It’s like magic.‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

Read more about our React components!‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

react-datocms‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

Before

Next.js‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌ with DatoCMS

Next.js CMS example

Next.js preview mode + DatoCMS Preview API = Content editors happiness‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

Since Next.js 9.3 you can take advantage of Preview Mode‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌: that means now you can go static (and hyper-fast) with visitors and dynamic with content editors, giving them instant previews for their edits.

That’s the best of both worlds, and pairs wonderfully with our GraphQL Preview endpoint.

// pages/movie.js
import { request } from 'graphql-request'
const query = `{
  movie(filter: { title: { eq: "Inception" } }) {
    releaseDate
    actors {
      name
    }
  }
}`
export async function getStaticProps({ preview }) {
  // If context.preview is true, append "/preview" to the API endpoint
  // to request draft data instead of published data.
  const endpoint = preview ?
    'https://graphql.datocms.com/preview' :
    'https://graphql.datocms.com/'
  const { movie } = await request(endpoint, query);
  return {
    props: { movie };
  }
}
export default MoviePage({ movie }) {
  ...
}‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

Acme Inc. - DatoCMS

Create new Blog post

Title

The Best Video Games to Play

Author

Dan Poe

Content

Text

Lorem ipsum....

Gallery

Text

Lorem ipsum....

CTA label

Try it now!

CTA URL

http://...

Quote

Lorem ipsum....

Author

Steve Jobs

Add a new block:

Text

Gallery

Quote

Call to action

Save Blog Post

A component-centric CMS, just like Next.js‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

Using components is one of the perks of using React and Next.js. That is why a CMS should think and behave just like that. Our component-based approach allows developers to clearly divide work amongst themselves and editors to immediately visualize a wireframe, ultimately providing a scalable and customizable experience.‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

Start your new Next.js project in minutes‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

Learn from our best-practice project. Fully configured and deployed on Vercel. Source included.‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌

Try our Next.js‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‌‍‍‌‍‌‌‍‌‌‌‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‌‌‍‌‌‍‍‌‍‍‍‌‍‍‍‌‌ demo project now! or Read our docs

We power experiences for over half a billion users