Create a product listing with Next.js

Overview

In this workshop you will learn how to create a simple commerce Jamstack application. We will create a product listing page and product detail pages using the Commerce.js SDK and Next.js. We will then complete the workshop by deploying the application to Vercel. Throughout this workshop you will learn how to:

1. Set up a Next.js project
2. Install the Commerce.js SDK
3. Fetch data from the Chec API using Commerce.js
4. Create a product listing page
5. Create static detail pages and use dynamic routing to the pages
6. Deploy application to Vercel

Workshop format

In this workshop, we will be focusing our efforts in integrating a commerce layer using the Chec API and Commerce.js SDK in a Next.js application. While we will also touch on Next.js concepts and high level of what a Jamstack is, we will stay focused on using Commerce.js.

Setting up a Next.js project is quite seamless but because most configurations have been set up with predefined styles to make this workshop as valuable as possible, you will be cloning a GitHub repository and building from a start branch. Each section has a branch name associated with it so that you can checkout a branch if you'd like to see the next section ie. git checkout feature/add-plp.

Requirements

What you will need to start this project:

• An IDE or code editor
• Node.js >= 10
• npm or yarn
• React devtools (recommended)
• GitHub account
• Vercel account (recommended)

Prerequisites

This workshop assumes you have some knowledge of the below concepts before starting:

• Basic knowledge of JavaScript
• Some knowledge of React as Next.js is a fullstack framework built on top of React
• An idea of the Jamstack architecture and how APIs work

Some things to note:

• We will only cover high level concepts of React and Next.js.
• To ensure you have some product data to work with for this workshop, we will provide you with a demo merchant public key.
• We will not be going over account or dashboard setup. Have a read here if you'd like to learn more about setting up a Chec account.
• This application is using the CSS utility library TailwindCSS, CSS preprocessor SASS, and BEM style naming methology for styling. Because the main goal of this guide is to learn build a Commerce.js and Next.js application, we will not be going over any styling details.

Initial setup

If you were to build a Next.js project from scratch, the simplest and quickest way to get started with a Next.js project is to run: create next-app command.

npx create-next-app
# or
yarn create next-app

Alternatively, if you don't want all the boilerplate code included you can run the following command in a new directory:

npm i react react-dom next
# or
yarn add react react-dom next

1. Install Commerce.js and add Next.js scripts to the repository

As noted above, let's clone the starter project from this repository, change directory into the project and install necessary dependencies.

git clone https://github.com/jaepass/commercejs-nextjs.git
# and
cd commercejs-nextjs && yarn

In order to communicate with the Chec API and fetch data from the backend, install the Commerce.js SDK:

yarn add @chec/commerce.js
# OR
npm install @chec/commerce.js

Next, you need to add some scripts to the package.json.

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

• next starts Next.js in dev mode with hot reloading.
• next build builds your project and ready it for production.
• next start starts your built app, used in production.

2. Store the public key in an environment variable file

Replace the sample .env.example dotenv file at the root of the project to store the Chec public_key.

# Copy from source file to destination file .env
cp .env.example .env

Open up your the .env file and add your Chec public key:

# Public key from Chec's demo merchant account
NEXT_APP_CHEC_PUBLIC_KEY=pk_184625ed86f36703d7d233bcf6d519a4f9398f20048ec

3. Create a Commerce.js instance

The Commerce.js SDK comes packed with all the frontend oriented functionality to get a customer-facing web-store up and running. To use the SDK, import the module in a folder called lib so you have access to the Commerce object instance throughout your application.

Go ahead and do that right now! In your src directory, create a new folder called lib, create a file commerce.js and copy and paste the below code in it. A lib folder in a project typically stores files that abstracts functions or some form of data.

// src/lib/commerce.js

import Commerce from '@chec/commerce.js';

const checPublicKey = process.env.NEXT_PUBLIC_CHEC_PUBLIC_KEY;
const devEnvironment = process.env.NODE_ENV === 'development';

if (devEnvironment && !checPublicKey) {
  throw Error('A Chec public API key must be provided as an environment variable named NEXT_PUBLIC_CHEC_PUBLIC_KEY. Retrieve your Chec public key in your Chec Dashboard account by navigating to Setup > Developer, or can be obtained with the Chec CLI via with the command chec whoami');
}

export const commerce = new Commerce(checPublicKey, devEnvironment);

Above, you've imported the Commerce object, then exported the instance with your Chec API key provided via an environment variable. The public key is needed to give you access to data via the Chec API.

You might want to throw an error if the public key isn't available, since it will probably make your application unusable.

Now, let's start your dev server.

yarn dev
# OR
npm dev