illustration for Create an eCommerce Store with Next.js and Stripe Checkout
pro

Create an eCommerce Store with Next.js and Stripe Checkout

Instructor

Colby Fayock
1h 4m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.9
123
people completed
Bookmark
Download
RSS

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.

🌱 This is a Fresh Course

This course is new and up to date—it is a must-watch for any developer that wants to add an e-commerce solution to their portfolio.

Credits

Kamil Khadeyev (illustration)

What you'll learn

  • eCommerce is dynamic even if its on the JamStack
  • Taking advantage of service providers can speed up the development process
  • The faster your website is, the more likely you are to convert purchases

Quick Facts

  • eCommerce is dynamic even if its on the JamStack
  • Taking advantage of service providers can speed up the development process
  • The faster your website is, the more likely you are to convert purchases

Questions to Reflect Upon:

  • How do I optimize the buying experience?
  • How do I manage product inventory?
  • What parts of the shopping experience need to be dynamic vs static?

Learner Reviews

  • Learner
    2 weeks ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What would make this course a 7 for you?

    It's complete and straight to the point and that makes it a 7

  • Learner
    2 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Amazing walk-through, will definitely use and recommend. Cheers!

  • Joseph
    3 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Straightforward and easy to understand. Volume is soft but it's easy to take care of that by just turning the volume up.

  • Jake LeBoeuf
    5 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Very well thought through and clear communication! It was easy to follow and Colby explained the "why" for each decision

  • Lucas
    5 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Aboslutely amazing course! Super easy to follow along and understand what Colby is talking about. You could easily implement this into any website. 10/10 course

Course Content

1h 4m • 15 lessons

    You might also like these resources:

    Getting Personal with Ecommerce, React, & the Static Web

    Colby Fayock・Talk

    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.

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

    Colby Fayock・Article

    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.

    Build a Content Management System for an E-commerce Store with Next.js and Sanity

    Colby Fayock・Article

    In this article, you will learn how to build a CMS for an ecommerce store with Next.js and Sanity.