↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

commercejs-nextjs-vercel

eCommerce JavaScript

Demo Store with Commerce.js and Next.js 🛍️💳

A high-fidelity fully-fledged eCommerce demo store built using the Commerce.js SDK and Next.js with live deployment to Vercel.


Note

  • This app is built using Commerce.js v2 SDK

Overview

This README will guide you in getting up and running with a fully-fledged eCommerce template. We have configured this template for you to one-click deploy directly to Vercel. Alternatively, you can manually deploy to your choice of hosting platform.

Prequisites

  • IDE or code editor of your choice
  • Node (v8.2.0 or higher)
  • NPM or Yarn
  • Chec CLI yarn global add @chec/cli

Setup

Create a Chec account.

Now that you’ve installed Chec CLI globally, you will be able to access the list of chec [COMMANDS], one of which is registering for a Chec account. Let’s go ahead and get that set up!

# Open the Chec registration page in your browser
chec register

Follow the rest of the walk-through to set up your merchant details. Alternatively, you can go here to register for a Chec account.

One-click Deploy with Vercel (recommended)

The one-click deploy allows you to add the Vercel application to your GitHub account to clone the commercejs-nextjs-vercel repository and deploy it automatically. Be sure to go to Vercel and sign up for an account with Github, GitLab, or GitBucket before clicking the deploy button.

Please note that the site deploy will first fail as we have yet to enter in the environment variables for your Vercel site. Configure your site by going under the Project Settings in the General tab then scroll down to Environment Variables to enter your public API key. The value is automatically encrypted and stored in Vercel system. The variable name input is CHEC_PUBLIC_KEY and the value input is the Public Key. Please note that for the purpose of getting you up and running with a live deploy preview of the demo store, we have provided you with the public_key from our demo merchant account. Access this key here and copy over the CHEC_PUBLIC_KEY value.

🥞 Stack

Customization and Extendability

  • Add shipping zones and enable shipping options in each product
  • Adding new features or extending existing features
  • Customizing the styling
    • All global styles are done using SASS and Bootstrap
  • A/B testing unique checkout designs and flow
  • Integrating other backend tools like Content Management Systems, Customer Support, Fulfillment services, and more.
  • Fetching real client reviews from reviews APIs
  • Adding search functionality
  • Leveraging webhooks to automate post checkout actions


↑