Next.js Commerce.js starter kit, one-click to Vercel

#javascript #nextjs #react

Your headless commerce starter kit

ChopChop 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
React Stripe Elements
Commerce.js
Vercel
Supports physical shipping and digital fulfillment
Accepts 135+ currencies
Is open-source on GitHub
Utilizes the most recent Next.js features (Next Image, 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 store to illustrate how our 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, 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 to create paths, configure cache revalidation, and provide data to each of the dynamic pages.

The ChopChop demo leverages React 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
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
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, or check out the demo store on our GitHub.