If your content is always fetched from a single geographical location, there’s no point in building a website with a serverless architecture.
DatoCMS offers your content from a CDN with edges all around the globe, minimizing latency.
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.
{}
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.
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.jsimport { request } from 'graphql-request'const query = `{movie(filter: { title: { eq: "Inception" } }) {releaseDateactors {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 }) {...}
Thanks to React, Next.js makes using components easy right from the get-go, and you should expect the same from your CMS. A component-based approach allows developers to clearly divide work amongst themselves and progress without having to rely on each other every step of the way.
Learn from our best-practice project. Fully configured and deployed on Vercel. Source included.