Next.js Commerce.js starter kit, one-click to Vercel
Tags: javascript, nextjs, react
Published: 2021-02-05 01:10:17

## Your headless commerce starter kit

[ChopChop](https://commercejs-chopchop-demo.vercel.app/) is a beautifully designed, elegantly developed, ope-source demo store and starter kit that sells fine tools for thoughtful cooks. 

**The TLDR**

Stack includes:
- [Next.js](https://nextjs.org/)
- [React Stripe Elements](https://stripe.com/docs/stripe-js/react)
- [Commerce.js](https://github.com/chec/commerce.js)
- [Vercel](https://vercel.com/)
- Supports physical shipping and digital fulfillment
- Accepts 135+ currencies
- Is [open-source on GitHub](https://github.com/chec/commercejs-chopchop-demo)
- Utilizes the most recent Next.js features ([Next Image](https://nextjs.org/docs/api-reference/next/image), [Dynamic Routes](https://nextjs.org/docs/routing/dynamic-routes))


## Motivation

In 2020 we saw headless commerce and the Jamstack really take off, with developers flocking to this new way of building, optimizing, and maintaining sites.

Last year in August we launched our first [open-source demo](http://commercejs-demo-store.netlify.app/) store to illustrate how our [commerce APIs](https://commercejs.com/product/commerce-apis) can be leveraged to build unique, high-performance purchasing experiences.

Since we release our first demo store, there’s been the Next.js 10 release, we’ve written [React hooks for cart and checkout](https://www.npmjs.com/package/@chec/react-commercejs-hooks), and the focus on commerce has intensified as more businesses look to differentiate and elevate their online presence.

## For developers

This open-source Commerce.js demo is statically built with Next.js, uses Stripe for payment, and is one-click deployable to Vercel. Product data (assets, prices, descriptions) and logic are all handled by Commerce.js.

The power of Next.js allows us to create static pages at build time by simply exporting the functions getStaticProps and getStaticPath``s inside our pages.

```javascript

export async function getStaticProps({ params }) {
  const { permalink } = params;
  const product = await commerce.products.retrieve(permalink, {
    type: "permalink",
  });
  return {
    props: {
      product,
    },
    revalidate: 60,
  };
}
export async function getStaticPaths() {
  const { data: products } = await commerce.products.list();
  return {
    paths: products.map(({ permalink }) => ({
      params: {
        permalink,
      },
    })),
    fallback: false,
  };
}

```

Above we are fetching a list of products from Commerce.js, and following [Next.js conventions](https://nextjs.org/docs/routing/dynamic-routes) to create paths, configure cache revalidation, and provide data to each of the dynamic pages.

The ChopChop demo leverages [React context](https://reactjs.org/docs/context.html#when-to-use-context) to store and mutate the current product theme (button colors), as well cart and checkout context to reduce network requests and latency for shoppers.

We’ve made this demo a shining example of both Next.js and Commerce.js, a powerful tech stack for high performance commerce experiences.

## Make ChopChop your own

This is an open source demo that can be freely downloaded, built on top of, pulled apart, and rebranded. You can also;

- Integrate another payment gateway, either one of our supported gateways or your own with our [manual gateway API](https://commercejs.com/docs/guides/manual-payment-integration)
- Integrate with the Google Calendar API to automatically add ticketed items to a customer’s calendars
- Suggest products from other sources based on items purchased, i.e. a book on knife skills if you buy the knife set
- Add Algolia for integrated search
- Add additional modules to the checkout flow to handle other content types, like booking a time to pickup in-store purchases
- Integrate with a CMS to make the content editable
- Create a customers login section using our [customers endpoint](https://commercejs.com/docs/api/#customers)
- Use webhooks to deliver SMS notifications about orders

## ChopChop, what are you waiting for?

There’s never been a better time to level up your customer experience or build a modern commerce site, so what are you waiting for? Create your free account with [Commerce.js](https://commercejs.com/), or check out the demo store on our [GitHub](https://github.com/chec/commercejs-chopchop-demo).