Next.js > Getting started

Getting started
Still using the old Pages Router?

If you're using Next versions older than 13, or if you're still using the Pages Router — that is, the features available in /pages — please follow this documentation instead.

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:

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 13 recommends the following:

Let's start by creating a helper function that uses the fetch API to perform requests to our GraphQL Content Delivery API endpoint. We'll then use this function 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:

// lib/datocms.js
export const performRequest = async ({ query, variables = {}, includeDrafts = false }) => {
const response = await fetch("https://graphql.datocms.com/", {
headers: {
Authorization: `Bearer ${process.env.NEXT_DATOCMS_API_TOKEN}`,
...(includeDrafts ? { "X-Include-Drafts": "true" } : {}),
},
method: "POST",
body: JSON.stringify({ query, variables }),
});
const responseBody = await response.json();
if (!response.ok) {
throw new Error(`${response.status} ${response.statusText}: ${JSON.stringify(responseBody)}`);
}
return responseBody;
}
Enhanced Data Fetching

While the above function works for simple cases, we strongly suggest to take a look at the next section, where we cover more details about data fetching, and introduce a more flexible and optimized performRequest().

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:

import { performRequest } from 'lib/datocms';
const PAGE_CONTENT_QUERY = `
query Home {
homepage {
title
description {
value
}
}
}`;
export default async function Home() {
const { data: { homepage } } = await performRequest({ query: PAGE_CONTENT_QUERY });
// [...]
}

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.