👉 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):

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.

Then set the three secret tokens that guard the endpoints used for Web Previews, SEO Previews and cache invalidation. Generate a different, cryptographically-secure random string for each of them (openssl rand -hex 32 is a good way to do it) — never reuse the same value across projects:

URL=http://localhost:3000
SEO_SECRET_TOKEN=<random string>
DRAFT_SECRET_TOKEN=<random string>
CACHE_INVALIDATION_SECRET_TOKEN=<random string>

If you deployed this demo with the "Deploy with DatoCMS" button, these three secrets were generated randomly for you and shown on the last step of the setup wizard. If you no longer have them, set new ones from your hosting provider's environment variable settings.

Run your project locally

npm install
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.