Creating the Storefront, Cart, and Product Detail Pages

Learn to create different components of an e-commerce app with Chakra UI and Next.js.

We'll cover the following

Building the storefront
Fetch and display the products
Create the single product page
Add a navbar and shopping cart
Create the CartContext
Create a cart page

GraphCMS offers a well-made, rock-solid, open-source template for creating e-commerce websites. We’re not adopting this starter template because we want to fully understand the reasoning behind certain technical decisions and how to approach the problems that can appear during the development phase.

Building the storefront

We can now focus on developing the first essential components for our storefront. We’ll wrap our entire application in a Chakra UI box so that every page will have a similar layout. We can do that by opening the _app.js file and adding the following components:

Get hands-on with 1200+ tech skills courses.

Before We Begin

Exploring Next.js: A Brief Primer

Exploring Different Rendering Strategies

Next.js Basics and Built-In Components

Hands-On Next.js

Managing Local and Global States in Next.js

CSS and Built-In Styles Methods

Using UI Frameworks

Using a Custom Server

Testing Next.js

Working with SEO and Managing Performance

Different Deployment Platforms

Managing Authentication and User Sessions

Building an E-Commerce Website with Next.js and GraphCMS

Create a Real-Time Chat Application in Next.js

Wrapping Up

Creating the Storefront, Cart, and Product Detail Pages

Building the storefront