gollumnima/ecommerce-demo-nextjs-snipcart

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

Deploy the demo with DatoCMS

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.

Deploying to Netlify

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.

Deploying to Vercel

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.

Development

Getting Started

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.

Adding Snipcart and DatoCMS

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

Learn More

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!

Deploy on Vercel

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.