Creating the Storefront, Cart, and Product Detail Pages

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

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 1400+ tech skills courses.