Next.js > Getting started
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:
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 inside the project directory and start the development server:
cd my-appnpm run dev
Fetching content from DatoCMS
When it comes to fetching data, Next 13 recommends the following:
perform the fetch on the Server, to reduce the back-and-forth communication between client and server;
use Next.js
fetchAPI, and call it whenever you need it, be it a layout, a page or a specific component.
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 lib, and inside of it, add a file called datocms.js:
// lib/datocms.jsexport 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;}
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 { request } from 'lib/datocms';const PAGE_CONTENT_QUERY = `query Home {homepage {titledescription {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.