Create an eCommerce Store with Next.js and Stripe Checkout
Portfolio Project

Create an eCommerce Store with Next.js and Stripe Checkout

Next.js
Stripe

Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

  • React: flexible and customizable while following modern best practices
  • Next.js: lightening fast with guide rails to help your project perform like consumers expect
  • Stripe Checkout: let's you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

What You’ll Build for Your Portfolio

How to build a start-to-finish dynamic Next.js app

Bootstrap a Next.js Ecommerce App

Integrate Stripe Checkout into Next.js

Manage Shopping Cart State

By the end of this project, you’ll have your own dynamic eCommerce store with a working checkout flow.

  • ✓Manage local state with React Hooks
  • ✓Manage global state with React Context
  • ✓Purchasing flow with Stripe Checkout
React Context API
Data Fetching
React useState
Custom React Hooks
Stripe Integration
Manage API keys
Pre-rendering
Dynamic Routing
CSS Grid
Vercel deploys
Meet Your Instructor
Colby Fayock

Colby is a UX designer and front-end engineer living on the Philly side of Pennsylvania. He got his start in web design customizing his AIM and MySpace pages, and quickly graduated to whole websites for teams and bands. He currently works as a developer advocate for Applitools.

Build Beyond this project

Additional Learning Resources

manage product inventory

Build a CMS for an E-commerce Store with Next.js and Sanity

Having the ability to build an online store opens up a ton of possibilities, whether you’re building that store for a new client to pay the bills or you’re trying to start your own business. In this article, you will learn how to build a CMS for an ecommerce store with Next.js and Sanity

Build high-performance ecommerce sites

Product Images That Don't Byte with the Next.js Image Component

By using the Next.js Image Component, you can add images to your project just like you would the standard img tag and be confident that you’ll be serving optimized images to your website visitors.

Explore the challenges of ecommerce

Getting Personal with Ecommerce, React, & the Static Web

Ecommerce depends on highly dynamic solutions personalizing experiences for customers from the price of a product to the total cost of that customer’s shopping cart. How can we leverage React and tools like Next.js to bring that dynamic experience to the static web?

In this talk, we’ll explore the challenges of ecommerce in a static world. We’ll talk about what tools are available to us and how we can take advantage of them to build dynamic web apps with a practical example of a Next.js app.

Add this project to your portfolio with your egghead Pro Membership

from just $20/month
Build this E-Commerce Store