Nextjs Templates & Themes Logo Nextjs Templates & Themes
Commercejs Nextjs Vercel screenshot

Commercejs Nextjs Vercel

Author Avatar Theme by Chec
Updated: 16 Aug 2021
85 Stars

Serverless eCommerce demo store built for the Jamstack. Built with Commerce.js, Next.js and can be one click deployed to Vercel. Includes product catalogue, categories, variants, cart, checkout, order confirmation and printable receipts. This is an open source project.

Github Live Preview

Categories

React Scss Ecommerce

Overview

The Demo Store with Commerce.js and Next.js is a fully-fledged eCommerce demo store built using the Commerce.js SDK and Next.js. It provides a high-fidelity template for building an eCommerce website and includes features such as live deployment to Vercel. The template is designed to be easily customizable and extendable, making it suitable for various eCommerce businesses.

Features

  • One-click deploy to Vercel
  • Integration with Commerce.js SDK for eCommerce functionality
  • Built with Next.js framework
  • Styling done using SASS and Bootstrap
  • Customizable checkout designs and flow
  • Option to add shipping zones and enable shipping options for each product
  • Ability to add new features or extend existing ones
  • Integration with other backend tools like Content Management Systems and Customer Support
  • Fetching real client reviews from reviews APIs
  • Search functionality
  • Webhooks for automating post-checkout actions

Installation

To install the Demo Store with Commerce.js and Next.js, you’ll need the following prerequisites:

  • IDE or code editor of your choice
  • Node (v8.2.0 or higher)
  • NPM or Yarn

Follow these steps to setup and deploy the template:

  1. Install Chec CLI globally by running the command yarn global add @chec/cli.
  2. Create a Chec account.
  3. Register for a Chec account using the Chec CLI by accessing the list of chec [COMMANDS].
  4. Set up your merchant details by following the provided walk-through or registering for a Chec account separately.
  5. Use the one-click deploy option with Vercel (recommended) by signing up for a Vercel account and adding the Vercel application to your GitHub, GitLab, or GitBucket account.
  6. Configure your Vercel site by entering the environment variables for the site in the Project Settings. Set the variable name input as CHEC_PUBLIC_KEY and the value input as the Public Key. Obtain the public_key from the demo merchant account provided in the documentation.
  7. After configuring the environment variables, the site will deploy and provide a live preview of the demo store.

Summary

The Demo Store with Commerce.js and Next.js is a feature-rich eCommerce template built using the Commerce.js SDK and Next.js framework. It offers easy installation with one-click deploy to Vercel and provides customizable options for checkout designs, shipping, and styling. The template is highly flexible and can be extended with additional features and integrations with backend tools. It also supports fetching real client reviews, search functionality, and automation of post-checkout actions using webhooks. Overall, it provides a comprehensive solution for building a fully-fledged eCommerce website.