Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Create an eCommerce Store with Next.js and Stripe Checkout

via egghead.io

Overview

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 as consumers expect
Stripe Checkout: lets 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.

Syllabus

  • Create a New React Application with the Next.js create-next-app CLI
  • Add and Style a Grid of Products with Images in a Next.js React App
  • Add and Configure Products in the Stripe Dashboard for an Online Store
  • Dynamically Manage a Grid of Products in an Online Store with a JSON Document
  • Host & Deploy a Next.js React App on Vercel imported from GitHub
  • Configure a Stripe Checkout Domain for Client-Only Integration
  • Add a Stripe API Key as an Environment Variable in Next.js & Vercel
  • Integrate Stripe Checkout to Purchase Products in Next.js with Stripe @stripe/stripe-js Cl
  • Create a Shopping Cart with the useState React Hook to Manage Product Quantity and Total
  • Create a Custom React Hook to Manage Cart State
  • Use the React Context API to Globally Manage Cart State in a Next.js App
  • Store and Load Cart State from Local Storage to Persist Cart Data When Reloading the Page
  • Use Next.js Dynamic Routes to Create Product Pages for an Online Store
  • Create a Shopping Cart Page to Manage Products to Purchase in a Next.js App
  • Add a Quantity Input to the Cart Page to Add or Remove Items from a Shopping Cart in Next

Taught by

Colby Fayock

Reviews

4.5 rating at egghead.io based on 65 ratings

Start your review of Create an eCommerce Store with Next.js and Stripe Checkout

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.