This is a Next.js ecommerce template bootstrapped with create-next-app
.
This example showcases a Next.js ecommerce using DatoCMS as the data source, and Snipcart, to manage the shopping cart.
The purpose of this repo is to have a quick start reference that can be set up with the "one-click" button below.
Here is what the result looks like
You can install this demo right away by clicking on this button:
The wizard will create a new DatoCMS project, will clone the demo repository on your GitHub, and will deploy it on Netlify or Vercel.
For the demo to work you need to go in your Netlify project > settings > build & deploy > environment variables, and create a new env variable called "NEXT_PUBLIC_SNIPCART_API_KEY". Paste in the value field, the key you find in your Snipcart project > account settings > API keys > public API key.
For the demo to work you need to go in your Vercel project > settings > environment variables, and create a new variable called "NEXT_PUBLIC_SNIPCART_API_KEY". Paste in the value field, the key you find in your Snipcart project > account settings > API keys > public API key.
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js
. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
Create a .env
file by copying the .env.sample
file. Add your Snipcart API key that you get after registration, and your Read-only DatoCMS API key that you can get from the admin area in your DatoCMS project, and your Snipcart API key that you can find in your account settings > API keys
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.