# 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](https://vercel.com/solutions/nextjs) 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.**

> [!NOTE] Still using the old Pages Router?
> If you're still using the [Pages Router](https://nextjs.org/docs/pages) — that is, the features available under `/pages` — please follow [this documentation](https://www.datocms.com/docs/legacy-next-js-documentation.md) instead.

#### Project starters

Our [marketplace](https://www.datocms.com/marketplace/starters.md) features different demo projects on Next, so you can learn and get started easily:

[

(Image content)

Next.js Starter Kit

Try this demo »

](https://www.datocms.com/marketplace/starters/next-js-starter-kit.md)[

(Image content)

Marketing Website

Try this demo »

](https://www.datocms.com/marketplace/starters/marketing-website.md)[

(Image content)

Ecommerce Website

Try this demo »

](https://www.datocms.com/marketplace/starters/ecommerce-website.md)

#### Tutorials

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

[

(Image content)

Next.js + DatoCMS tutorial for beginners

Play video »

](https://www.youtube.com/watch?v=_VIF1if-dNA)

[

(Image content)

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

Play video »

](https://www.youtube.com/watch?v=it5nNneptgM)

[

(Image content)

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

Play video »

](https://www.youtube.com/watch?v=Wh3P-sS1w0I)

## 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:

Terminal window

```bash
npx create-next-app@latest
```

Then enter the project directory and start the development server:

Terminal window

```bash
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](https://nextjs.org/docs/app/building-your-application/data-fetching#fetching-data-on-the-server), to reduce the back-and-forth communication between client and server;
    
-   [use Next.js `fetch` API](https://nextjs.org/docs/app/building-your-application/data-fetching#the-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](https://www.datocms.com/docs/content-delivery-api/api-endpoints.md):

Terminal window

```bash
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`:

lib/datocms.js

```jsx
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,
  });
}
```

> [!WARNING] 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()`.](https://www.datocms.com/docs/next-js/optimizing-calls-with-react-cache-function.md#our-improved-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:**

How to create a GraphQL API Token (Video 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:

```jsx
import { performRequest } from 'lib/datocms';

const PAGE_CONTENT_QUERY = `
  query Home {
    homepage {
      title
      description {
        value
      }
    }
  }`;

export default async function Home() {
  const { homepage } = await performRequest(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](https://www.datocms.com/docs/content-delivery-api.md).

## Related content in "Next.js"

- [Next.js + DatoCMS Overview](https://www.datocms.com/docs/next-js.md)

- [Optimizing calls to DatoCMS](https://www.datocms.com/docs/next-js/optimizing-calls-with-react-cache-function.md)
- [Managing images](https://www.datocms.com/docs/next-js/managing-images.md)

- [Displaying videos](https://www.datocms.com/docs/next-js/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/next-js/rendering-structured-text-fields.md)

- [Adding SEO to pages](https://www.datocms.com/docs/next-js/seo-management.md)
- [Setting up Next.js Draft Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-draft-mode.md)

- [Real-time updates](https://www.datocms.com/docs/next-js/real-time-updates.md)
- [DatoCMS Cache Tags and Next.js](https://www.datocms.com/docs/next-js/using-cache-tags.md)

- [Visual Editing](https://www.datocms.com/docs/next-js/visual-editing.md)
- [Next.js Starter Kit    
Words are nice... but code speaks louder. Dive into a fully commented project template,
            showcasing these techniques (and more) in action.
       ✅ Official   Next 16](https://www.datocms.com/marketplace/starters/next-js-starter-kit.md)