nextjs-commercejs-example

This repo contains all of the code necessary to create a static commerce with Next.js and Commerce.js. It includes creating index pages for products and categories, single product and category pages, and categories with associated products.

Run this locally

1. npm install
2. Add your NEXT_PUBLIC_CHEC_PUBLIC_API_KEY to .env
3. npm run dev

Build it with me

Before you start, you'll want to create an account at Chec or use the CLI.

You'll also need to create a few categories, that have products to get the most out of this tutorial. Once you've done that, grab a copy of your public API key. You can find this at Chec Dashboard > Developer Settings.

If you don't want to create an account with Commerce.js to follow along with this tutorial, you can use the demo store public key pk_184625ed86f36703d7d233bcf6d519a4f9398f20048ec.

1. Initial setup

In this tutorial we will be using Next.js. To begin, inside a new directory, do the following:

npm init -y
npm install react react-dom next @chec/commerce.js

Open package.json and add the following scripts:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Now create a new file .env and add your public API key here.

NEXT_PUBLIC_CHEC_PUBLIC_API_KEY=...