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-space-jelly-gear

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?sub_confirmation=1

🐦 Get updates straight to your Twitter @colbyfayock
https://twitter.com/colbyfayock

📸 Catch the next stream live on Twitch @colbyfayock
https://twitch.tv/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: hello@colbyfayock.com

👨‍🚀 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-snipcart

🎼 Music
Music from Uppbeat (free for Creators!):
http://uppbeat.io/t/dope-cat/purple-style
License code: 52V3XK3BYHAVCLWY

#colbyfayock #nextjs #ecommerce #snipcart #reactjs #onlinestore #ecomm #webdevelopment

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Add a Shopping Cart & Checkout to a Next.js App with Snipcart