👉 Visit the DatoCMS homepage or see What is DatoCMS?

An Ecommerce Website Demo using Next.js 16 and DatoCMS

This example showcases a TypeScript Next.js 16 website with App Router (app) — using DatoCMS as the data source.

It uses the official @datocms/cda-client for content fetching, which provides TypeScript support, auto-retry on rate limits, and better error handling.

It also uses GraphQL CodeGen to type all of the requests coming from Dato automatically: See how it works here

Demo

Have a look at the end result live:

https://ecommerce-website-demo-livid.vercel.app/

How to use

Quick start

1. Create an account on DatoCMS.

2. Make sure that you have set up the Github integration on Vercel.

3. Let DatoCMS set everything up for you clicking this button below:

Local setup

Once the setup of the project and repo is done, clone the repo locally.

Set up environment variables

In your DatoCMS' project, go to the Settings menu at the top and click API tokens.

Create three DatoCMS API tokens: CDA Only (Published), CDA Only (Draft), and CMA Only (Read).

Next, copy the .env.example file in this directory to .env (which will be ignored by Git):

1
cp .env.example .env

and set DATOCMS_PUBLISHED_CONTENT_CDA_TOKEN, DATOCMS_DRAFT_CONTENT_CDA_TOKEN, and DATOCMS_CMA_TOKEN with the matching token values.

Also then set a secret token that is being used for WebPreviews, SEO Previews and Cache invalidation:

1
URL=http://localhost:3000
2
SEO_SECRET_TOKEN=superSecretToken
3
DRAFT_SECRET_TOKEN=superSecretToken
4
CACHE_INVALIDATION_SECRET_TOKEN=superSecretToken

Run your project locally

1
npm install
2
npm run dev

Your blog should be up and running on http://localhost:3000!

VS Code

It's strongly suggested to install the GraphQL: Language Feature Support extension, to get autocomplete suggestions, validation against schema, and many more niceties when working with your GraphQL queries.

What is DatoCMS?

DatoCMS is Headless CMS for the modern web. Trusted by 25,000+ businesses, agencies, and individuals, it gives your team one place to manage content and ship it to any website, app, or device via API.

New here? Start with Create free account and the Documentation. Stuck? Ask the Community. Curious what's new? Product Updates.

Building with AI: Agent Skills turn coding assistants (Claude Code, Cursor) into expert DatoCMS developers, with full read/write via the auto-installed CLI. No local terminal? Use the MCP Server instead.

Talking to DatoCMS from code:

• Content Delivery API (CDA) — the fast, read-only GraphQL API your website/app uses to fetch published content.
• Content Management API (CMA) — the REST API for creating and updating content, models, and project settings (think scripts, migrations, integrations).
• CLI — terminal tool for schema migrations and importing from Contentful/WordPress.

Framework guides: end-to-end recipes for fetching content, rendering Structured Text, optimizing images/video, handling SEO, and setting up live preview with visual editing in Next.js, Nuxt, Svelte, and Astro.

Want a head start? Browse our starter projects — ready-to-deploy example sites for popular frameworks.