🎈 Welcome to the Marketplace — Explore and discover the ecosystem around DatoCMS, and share your own work with the community!

React ecommerce template

Next.js Ecommerce template

Next.js ecommerce template made with Snipcart and DatoCMS. A simple example of the power of these technologies combined

Next.js ecommerce template
Next.js ecommerce template
Want to create your own starter project? Learn how to do that in our documentation!

Note: More recent examples are available

This example was built with an older version of Next.js. For examples using more recent versions of Next and other frameworks, please see our most current demos and starter kits.

Next.js ecommerce template + Snipcart + DatoCMS

If you want to get started with Next.js this is a good place to begin! This is a simple Next.js ecommerce example to show you how Next.js seamlessly integrates with Snipcart and DatoCMS, providing quickest way to get your ecommerce started.

Installing this template will:

  • Clone a Github repo with a fully working example of a simple ecommerce, written in Next.js and Typescript.
  • Copy our DatoCMS template project to your DatoCMS account.
  • Deploy on Vercel or Netlify your newly created ecommerce.

Resources

This template is explained in details in the related blog post. Follow the instructions to build it from scratch and delve deeper in how a Next.js ecommerce is built.

You can see how it looks live on this demo installation.

Deploy on DatoCMS

If you want to set up a live demo for yourself, just sign up for a free DatoCMS account and click this button:

Deploy with DatoCMS

React ecommerce example usage

To run this project locally, install the dependencies of this project:

1
npm install

Add an .env.local file containing the read-only API token of your DatoCMS site (set up with the demo button above) and your Snipcart API key:

1
echo 'NEXT_PUBLIC_DATO_API_READONLY_TOKEN=abc123' >> .env.local
2
echo 'NEXT_PUBLIC_SNIPCART_API_KEY=abc123' >> .env.local

Then, to run this website in development mode (with live-reload):

1
npm run start

To build the final, production ready static website:

1
npm run build

The final result will be saved in the public directory.

Subscribe to our newsletter! 📥
One update per month. All the latest news and sneak peeks directly in your inbox.
support@datocms.com ©2024 Dato srl, all rights reserved P.IVA 06969620480