### Next.js 16 Ecommerce Demonstration

## Ecommerce Website

### Offers typed GraphQL queries, Tailwind, multi-language, visual editing with real-time updates in preview mode, SEO/Readability analysis, and much more

[

**Want to create your own starter project?** Learn how to do that in our documentation!

](https://www.datocms.com/docs/general-concepts/project-starters-and-templates.md#generate-a-project-starter-button)

[(Image content)](https://www.datocms.com/.md)

👉 [Visit the DatoCMS homepage](https://www.datocms.com/.md) or see [What is DatoCMS?](https://www.datocms.com/marketplace/starters/ecommerce-website.md#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](https://www.datocms.com/.md) as the data source.

It uses the official [@datocms/cda-client](https://github.com/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](https://www.datocms.com/blog/how-to-generate-typescript-types-from-graphql.md)

## Demo

Have a look at the end result live:

### [https://ecommerce-website-demo-livid.vercel.app/](https://ecommerce-website-demo-livid.vercel.app/)

## How to use

### Quick start

1.  [Create an account on DatoCMS](https://datocms.com/).
    
2.  Make sure that you have set up the [Github integration on Vercel](https://vercel.com/docs/git/vercel-for-github).
    
3.  Let DatoCMS set everything up for you clicking this button below:
    

[(Image content)](https://dashboard.datocms.com/deploy?repo=marcelofinamorvieira%2Fecommerce-website-demo%3Amain)

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

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

```plaintext
URL=http://localhost:3000SEO_SECRET_TOKEN=superSecretTokenDRAFT_SECRET_TOKEN=superSecretTokenCACHE_INVALIDATION_SECRET_TOKEN=superSecretToken
```

#### Run your project locally

```bash
npm installnpm run dev
```

Your blog should be up and running on [http://localhost:3000](http://localhost:3000/)!

## VS Code

It's strongly suggested to install the [GraphQL: Language Feature Support](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) extension, to get autocomplete suggestions, validation against schema, and many more niceties when working with your GraphQL queries.

---

## What is DatoCMS?

[(Image content)](https://www.datocms.com/.md)

[DatoCMS](https://www.datocms.com/.md) 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](https://dashboard.datocms.com/signup) and the [Documentation](https://www.datocms.com/docs.md). Stuck? Ask the [Community](https://community.datocms.com/). Curious what's new? [Product Updates](https://www.datocms.com/product-updates.md).

**Building with AI:** [Agent Skills](https://www.datocms.com/docs/agent-skills.md) 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](https://www.datocms.com/docs/mcp-server.md) instead.

**Talking to DatoCMS from code:**

-   [Content Delivery API](https://www.datocms.com/docs/content-delivery-api.md) (CDA) — the fast, read-only GraphQL API your website/app uses to **fetch** published content.
-   [Content Management API](https://www.datocms.com/docs/content-management-api.md) (CMA) — the REST API for **creating and updating** content, models, and project settings (think scripts, migrations, integrations).
-   [CLI](https://www.datocms.com/docs/scripting-migrations/installing-the-cli.md) — 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](https://www.datocms.com/docs/next-js.md), [Nuxt](https://www.datocms.com/docs/nuxt.md), [Svelte](https://www.datocms.com/docs/svelte.md), and [Astro](https://www.datocms.com/docs/astro.md).

**Want a head start?** Browse our [starter projects](https://www.datocms.com/marketplace/starters.md) — ready-to-deploy example sites for popular frameworks.