Next.js is an exceptional tool for building modern, universal frontend applications with the power of React. It lets you get started without having to write much boilerplate code and with a set of sane defaults from which you can build upon.

Vercel is the easiest way to deploy a production-ready highly available Next.js website, with static assets being served through the CDN automatically and built-in support for Next.js’ automatic static optimization and API routes.

DatoCMS is the perfect companion to Next.js since it offers content, images and videos on a globally-distributed CDN, much like Vercel does for the static assets of your website. With this combo, you can have an infinitely scalable website, ready to handle prime-time TV traffic spikes, at a fraction of the regular cost.

Our marketplace features different demo projects on Next, so you can learn and get started easily:

Loading responsive, progressive images from DatoCMS

One of the mayor advantages of using DatoCMS instead of any other content management systems is its responsiveImage query, which will return pre-computed image attributes that will help you setting up responsive images in your frontend without any additional manipulation.

To make it even easier to offer responsive, progressive, lazy-loaded images on your projects, we released a package called react-datocms that exposes an <Image /> component and pairs perfectly with the responsiveImage query:

Accessing draft/updated content in Next.js "preview mode"

If you're using getStaticProps, props will be generated at build time, which is great from a performance point of view, but not ideal when you’re writing a draft on DatoCMS and want to preview the draft immediately on your page.

Next.js has the feature called Preview Mode which solves this problem. Here’s an instruction on how to use it.

Step1: Create a preview API route

First, create a preview API route. It can have any name - e.g. pages/api/preview.js. In this API route, you need to call setPreviewData on the response object. The argument for setPreviewData should be an object, and this can be used by getStaticProps (more on this later).

For the sake of this example, we’ll just use {}:

// pages/api/preview.js

exportdefault(req, res)=>{

res.setPreviewData({});

res.writeHead(307,{Location:'/'});

res.end();

}

You can test this manually accessing the route from your browser from http://localhost:3000/api/preview. You’ll notice that you'll be redirected to the homepage, and the __prerender_bypass and __next_preview_data cookies will be set.

Step 2: Update getStaticProps

The next step is to update getStaticProps to support the preview mode. If you request a page which has getStaticProps with the preview mode cookies set via res.setPreviewData, then getStaticPropswill be called at request time instead of at build time.

Furthermore, it will be called with a context object where:

context.preview will be true.

context.previewData will be the same as the argument used for res.setPreviewData.

exportasyncfunctiongetStaticProps(context){

// If you request this page with the preview mode cookies set:

//

// - context.preview will be true

// - context.previewData will be the same as

// the argument used for `setPreviewData`.

}

In this case, we can use the https://graphql.datocms.com/preview endpoint to access records at their latest version available, instead of the currently published.

Both endpoints offer exactly the same queries, the only thing that will change will be the returned content: