Next.js > Next.js + DatoCMS Overview

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 upon which you can build.

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.

Project starters

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

Next.js Starter Kit

Try this demo »

Marketing Website

Try this demo »

Ecommerce Website

Try this demo »

Tutorials

Our Community has also created many great video tutorials you can follow:

Next.js + DatoCMS tutorial for beginners

Play video »

Build a dynamic landing page with Next.js and Tailwind CSS

Play video »

How to use Next.js On-Demand ISR with DatoCMS webhooks

Play video »

Quick start

First, create a new Next.js application using create-next-app, which sets up everything automatically for you.

To create a project, run the following command and follow the wizard:

npx create-next-app@latest

Then enter the project directory and start the development server:

cd my-app
npm run dev

Fetching content from DatoCMS

When it comes to fetching data, Next recommends the following:

• perform the fetch on the Server, to reduce the back-and-forth communication between client and server;

• use Next.js fetch API, and call it whenever you need it, be it a layout, a page or a specific component.

Let's start by installing @datocms/cda-client, a lightweight, TypeScript-ready package that offers various helpers around the native Fetch API to perform GraphQL requests towards DatoCMS Content Delivery API:

npm install --save @datocms/cda-client

We can now create a function we can use in all of our components that need to fetch content from DatoCMS: Create a new directory called lib, and inside of it, add a file called datocms.js:

import { executeQuery } from '@datocms/cda-client';

export const performRequest = (query, options) => {
  return executeQuery(query, {
    ...options,
    token: process.env.NEXT_DATOCMS_API_TOKEN,
    environment: process.env.NEXT_DATOCMS_ENVIRONMENT,
  });
}

You can see that to build the right authentication header, we're using an environment variable prefixed by NEXT_ . To create the API token for a DatoCMS project, go in the "Settings > API Tokens" section, making sure you only give it permission to access the Content Delivery API and the Content Delivery API with draft content:

Next, go to app/page.js — that is, the component that renders the homepage of our project — define the GraphQL query to be executed, and in the component use the performRequest() function to perform the request:

1
import { performRequest } from 'lib/datocms';
2

3
const PAGE_CONTENT_QUERY = `
4
  query Home {
5
    homepage {
6
      title
7
      description {
8
        value
9
      }
10
    }
11
  }`;
12

13
export default async function Home() {
14
  const { homepage } = await performRequest(PAGE_CONTENT_QUERY);
15

16
  // [...]
17
}

The PAGE_CONTENT_QUERY is the GraphQL query, and of course, it depends on the models available in your specific DatoCMS project.

You can learn everything you need regarding how to build GraphQL queries on our Content Delivery API documentation.