Next.js 14 E-Commerce Website with Stripe, and Sanity.io | Full Stack Tutorial | 2023

Installation Command: npm i stripe use-shopping-cart next-sanity @stripe/stripe-js @sanity/image-url --force

Resources used:

Timestamps
00:00 Intro
01:02 Demo
03:10 Installation
28:30 Create UI
01:25:00 Create Product Page
02:03:00 Implement Payment
02:56:00 Deployment to Vercel

@VercelHQ @sanity_io @stripe

[ElNicopewpew]

Sweet! If you would like to expand on this tutorial, I think we the people would love to see you implement a dynamic navbar, so the user can add new categories from sanity, and perhaps a search function?

[MrMrkram]

Just deployed to Vercel with stripe & sanity great video.

[tommytanti]

Thanks brother, you have been a life savior.

[fexzi]

Just deployed to vercel and its working. Thanks. Can you make another tutorial to explain react crash course.

[DevVibes]

Nice Project! Helped me to increase my Website Development skills from basic to very high level. Best project ever in my life.

[CptJuke]

Great Tutorial! You make everything look so easy…

[SatyamChaturvedi-ejzk]

Great tutorial Jan btw anyone facing issues while fetching data in sanity, I am getting drafts as well when fetching products

[petrzajkas]

Great tutorial, thanks for what you doing! It's well explained in detail and an easy-to-follow tutorial. You just earned yourself a subscriber. :) More tutorials like this, please. Stay safe.

[tenr]

@20:42 to make a reference from one document to another. Super important, when you are using numerous documents!

[bijendernagar]

Thanks for your efforts best tutor on youtube you explain every thing in detail and simple words for begainers understand properly thanks again Subscribed you Love From India

[Schickr]

Thank you! i subscribed to you directly. i also use the aura theme in vs code :)

[paulreidy]

Hi Jan, scratch that last question, I'd named the Newest.tsx as a .jsx file.

[anjumraza]

Hello Jan Marshal,
Nice Job, Thank you so much for such wonderful tutorial build.

[alexiizz]

I got an error at 1:20:30 TypeError: Cannot read properties of null (reading 'default'), maybe i did something wrong but if you are getting the same error i solved it adding a 5 instead of a 4 to [_type == "product"][0...5]

[fiimble]

Hello Jan,
Thanks so much for such wonderful tutorial build.

Thanks again!

[hamidmalik]

Hey Jan Marshal, Your videos are really outstanding. I have learned a lot from you. I wanna give you a big bundle of thanks to you. I'm also follow the current video and building e commerce website but the problem that I'm facing is that check out button is not working. When I click on the checkout button nothing happen. I have followed all your steps. Also watched the video 3 to 4 times

[thatguydave_]

Thank you so much for this video, I've learnt a lot but when i add a second product to the cart, it just increases the quantity of the previously added product. I can only seem to add one product, every other thing i add just increases the quantity of the product that's already there

[paulreidy]

Hope you can help Jan.
At 1:14 when the interface.ts file is created and the line
const data = await getData(); changes to
const data: simplifiedProduct[ ] = await getData();
I get an error 'const' declarations must be initialized.
Do you know whats going on here?

[jeffqseid]

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

for both CheckNow and AddToBag :(

[wowgaming]

Its functional add to card etc where you implemented please time stemp