Add a Shopping Cart & Checkout to a Next.js App with Snipcart
Learn how to add a full end-to-end shopping cart and checkout funnel to a Next.js app using Snipcart. We'll walk through setting up a Snipcart account, setting up Snipcart in a Next.js app, and how you can programmatically add products from a dynamic source for purchase in an online store.
This is a preview of my course: Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js
🚀 https://spacejelly.dev/ecommcourse
This course will walk you step-by-step through the entire process including:
Creating a new React app with Next.js
Manage product data from a GraphQL API with dynamic routes using GraphCMS
Adding a shopping cart with Snipcart with Stripe as a payment gateway
Easy product image management and optimization with Cloudinary
Using Leaflet to add a map of all of our IRL store locations
Deploying a Next.js app to Vercel
The course is FREE for launch, so head over to egghead.io right away to jump in!
🚀 https://spacejelly.dev/ecommcourse
🧐 What's Inside
00:00 - Intro
00:12 - Course Preview
00:54 - Setting up a new free Snipcart account
02:11 - Add Snipcart tags to a Next.js app
03:58 - Using a custom document file to set up global tags and scripts
05:49 - Configuring dynamically sourced products to add to a shopping cart
08:11 - Setting up Snipcart to only open as a sidebar
09:35 - Wrapping the app globally with useSnipcart to access Snipcart context
10:53 - Listening to Snipcart state in the header with useSnipcart to update the cart total
12:39 - Opening up the shopping cart when clicking the cart with Snipcart class attributes
13:08 - Review
13:42 - Outro
💾 Code
https://github.com/colbyfayock/my-spa...
🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]
👨🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses
🧰 More Resources
ECommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js
https://spacejelly.dev/ecommcourse
Snipcart
https://snipcart.com/
https://spacejelly.dev/snipcart (Free 1 month!)
useSnipcart
https://github.com/colbyfayock/use-sn...
🎼 Music
Music from Uppbeat (free for Creators!):
http://uppbeat.io/t/dope-cat/purple-s...
License code: 52V3XK3BYHAVCLWY
#colbyfayock #nextjs #ecommerce #snipcart #reactjs #onlinestore #ecomm #webdevelopment
Watch video Add a Shopping Cart & Checkout to a Next.js App with Snipcart online without registration, duration hours minute second in high quality. This video was added by user Colby Fayock 14 April 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,497 once and liked it 181 people.