Published on

Create a fully-fledged Jamstack commerce store with Commerce.js and Netlify

Authors
Table of Contents

For this tutorial, we’ve developed a fully customizable, open-source, commerce storefront. This demo comes with all the bells and whistles needed to sell online, and best of all, it’s ready for you to go live with today. This is a production ready storefront, using modern development tools and frameworks. We’ve bundled together tools like Next.js and Redux so you can easily add in your necessary data, customize or A/B test any elements, add new features or extend on other capabilities. The possibilities to add and build on-top of this resource are truly endless!

As mentioned above, we are using the Jamstack, a term coined by Netlify, which is an architectural pattern for building modern applications. It effectively stands for a stack that includes JavaScript, APIs, and Markup. A Jamstack approach allows for greater extendability and dynamic capabilities within your project. We have chosen to go with Next.js as the JavaScript front-end framework. Next.js has all the benefits of server-side and client-side rendering, statically serving your application for better performance, SEO, and easier scalability. Read more here on all the other features of Next.js.

Chec is the API platform that powers your commerce store, Commerce.js is the SDK layer we will be using to help with abstracting complex commerce logic. Lastly, Netlify will take the built static Markup generated at build time and deploy to its global CDN.

Alright, enough on selling you on this kickass stack of Next.js, Commerce.js, and Netlify, let’s jam!

Summary of Tutorial

In this tutorial, we will walk you through:

  • Creating a Chec account and setting up your store
  • Deploying application with Netlify
  • The core parts of eCommerce application development
    • Using Redux for the application’s state management
    • Pre-fetching server-side rendered data for the static pages
    • Rendering our product pages
    • Handling our cart functionality
    • Handling our checkout process
    • Rendering an order confirmation page with print receipt functionality
  • Customizing and extending the project

Prequisites

This tutorial assumes you have some basic to mid-level knowledge of React, ES6 and state management concepts with Redux. Throughout the tutorial where intermediate to advanced concepts are referenced, links to documentation will be included.

More

Read the rest of the tutorial on Netlify's blog.

Discuss on Twitter • View on GitHub