Next.js 14 E-Commerce Website with Stripe, and Sanity.io | Full Stack Tutorial | 2023
Вставка
- Опубліковано 5 сер 2024
- Build a modern and performant full stack Next.js 14 Ecommerce Website complete with secure Stripe payment integration, efficient content management through Sanity.io and beautiful styling using Tailwindcss and Shadcn UI for accessible components.
👨🏻💻Github Repository: www.janmarshal.com/courses/ne...
☕️ Buy me a coffe: www.buymeacoffee.com/janmarshal
📧 Business ONLY: jan@alenix.de
Installation Command: npm i stripe use-shopping-cart next-sanity @stripe/stripe-js @sanity/image-url --force
Resources used:
Next.js: nextjs.org/
Sanity.io: www.sanity.io/
Stripe: stripe.com/
Shadcn/UI: ui.shadcn.com/
Use Shopping Cart: useshoppingcart.com/
Timestamps
00:00 Intro
01:02 Demo
03:10 Installation
09:30 Sanity.io Setup
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
NextJs deprecated domains. It's replaced with remotePatterns.
images: {
remotePatterns: [
{
protocol: "https",
hostname: "cdn.sanity.io**",
},
],
},
thanks
this solve the issue. just remove the port :D
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.
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?
Thanks brother, you have been a life savior.
Hello Jan Marshal,
Nice Job, Thank you so much for such wonderful tutorial build.
Nice Project! Helped me to increase my Website Development skills from basic to very high level. Best project ever in my life.
Such a Great Tutorial..👏👏💙
Thank you! i subscribed to you directly. i also use the aura theme in vs code :)
I made it : ), thanks bro
thank you bro you are the best
Amazing website
Great tutorial Jan btw anyone facing issues while fetching data in sanity, I am getting drafts as well when fetching products
Great Tutorial! You make everything look so easy…
I wish haha
@@janmarshalcoding yeah i wish it was that easy aswell! haha
you earned a subscriber
Hello Jan,
Thanks so much for such wonderful tutorial build.
Thanks again!
Thanks 😀
Hey @@janmarshalcoding
I implemented the 'clearCart()' method upon a successful payment on localhost. It works and the cart is emptied when I return to the store. But when I use the live server -vercel- for testing the cart still shows the items in it, even after a successful test transaction. Do I have to be on "LIVE" mode and NOT on "TEST" on Stripe for it to work?
Best regards,
Jorge
Hey Gorge,
I haven't tried clearCart, but will try to reproduce it later tonight and will come back with my results. So cool that you try to tackle problems you face yourself, most just complain 🤌🏻👍🏻. Also to clarify, you mean emptying the cart works on localhost with clearCart() but not in production using vercel?
Great work.
nice thank you so much, liked and subscribed 😍😍🎉🎉🎊🎊👍👍👌👌🙌🙌
thanks Jan , it is a wonderful vedio about e-commerce site , hope adding the paypal of payment .
Thanks!
Thank you
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
Thank you ✌🏻
Just deployed to Vercel with stripe & sanity great video.
Thanks ✌🏻
@20:42 to make a reference from one document to another. Super important, when you are using numerous documents!
nice UI
Спасибо!
🙏🏻
Awesome
This is nice.. request you to do more of Remix tuts
Just deployed to vercel and its working. Thanks. Can you make another tutorial to explain react crash course.
Great!
I will probably do it at some point...
Hi Jan, scratch that last question, I'd named the Newest.tsx as a .jsx file.
Please, how do I modify the stripe checkout page and collect the customer's address?
Great video! Also, you look like someone I know irl.
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 :(
Thanks for ur video. Can u help me: why I can't see the price including sale percent inside my shopping cart? for example, newest page have sale price, when I click category - same, but when inside my cart can c only normal price without sale. How I can fix it ? Thanks
Thank you
Its functional add to card etc where you implemented please time stemp
Will you please make an e-commerce website using Remix which includes pagination, infinite scrolling، image optimization, uploading images , authentication with credentials and also with Google.
Hey Jan Marshall Bro .
Hope you are fine
Brother dynamic page images you didn't discuss which api you use to get images i am stuck there ..
Hi Jan any idea how to remove the old images i have been following the tutorial up to 1.04 however when i try to replace the images the old ones stay. Please help..
First, and it was 4.55 AM in my country 😂
Hi Jan, On the global.css tailwind imports how do you fix the error underline? I keep getting that and its annoying.
ver nice tutorial can u add clerk auth
Thanks for this project Mr Jan. Please I'm getting an error whenever i try to fetch my hero images @58.40 minutes. the error says: Error: Dataset not found - Dataset "production" not found for project ID. kindly help because I'm stuck. Thank you
When i treid to checkout its says in my console log no such plans does anyone know this fix of error
how to get dynamic product id from stripe?
Second, and it's 01:05 a.m in my country 😂
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]
great work ❤
Thanks 😄
@@janmarshalcoding there aren't so much course on sanity on youtube so keep up the good work
@@lordsonmateleddi5481 meh, throw the Sanity part. There are probably no videos on Next 14, right now.
actually he doesnt even use next 14 in this one @@MarosiMate-sq2wm
hi my checkout button still not working after change the button what the issue can anyone guide me??
How show all iteam in see all can somone help?
Tried following this but use-shopping-cart dependencies are not well managed. I used pnpm for this project, it kept complaining about that package. Thanks a lot for this tutorial. Appreciate
it's just a warning. because it is outdated
nice project. Can you please specify that in this project you use reactJs or typescript only.
At the end of the day typescript is still JavaScript. So when you follow the project just don’t create any types (interfaces etc.)
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
I was getting the same bug, double check if you are adding "key={data._id}" into " " tag in "app>product>[slug]>page.tsx " that worked for me
hmm this didnt work though@@sergioafanadorbayona2043
Great project! There's just a problem, you Vercel link to the project is not working...
Because I don't have unlimited bandwidth 😂 and therefore I deleted the deployment.
Hey bro , Thank you for the awesome tutorial , I'm a beginner in JS and I'm starting using your tutorials, however in this one , when I wanted to config sanity I noticed that they completely changed their project in their latest update and made a standalone studio and whatnot, How can I continue? Can this project be done without sanity ? I am more keen to create my own admin dashboard and database for the project.
Well, then I have great news for you, because I will release an ecommerce tut this week with all the thing you just mentioned. Stay tuned.
@@janmarshalcoding Wow, that's awesome! I'll be waiting for it. Thanks!
Do you know how I can use revalidatePath with sanity webhook instead of force-dynamic all the ssg pages? I can't find an example online with app router
Well, you could do that, but I surely would not do that... I would rather delete force-dynamic and add the following: export const revalidate = 3600 // revalidate the data at most every hour
then change the seconds to what ever you prefer...
@@janmarshalcoding But what if I need almost instant revalidation but have thousands of routes. What is the actual cost of this data refetching, say if I have 1000 dynamic routes, it gets rebuilt 1000 times every minute, do you know if there is a limit on Vercel?
Hello Jan
I hev error cannot ready property of undefined ('reading' 'disptach') how to solve this guide mr
I'm having the same issue right now "TypeError: Cannot read properties of undefined (reading 'dispatch')" it shows that the error is coming from the "const {cartCount}= useShoppingCart();" part
solved, i was importing {CartProvider} from "use-shopping-cart" insted of import CartProvider from "./components/Providers" into Layout.tsx
Were you able to solve it? The same thing happens to me in Navbar.tsx ' ⨯ node_modules
eact-redux\es\hooks\useDispatch.js (18:0) @ useDispatch
⨯ TypeError: Cannot read properties of undefined (reading 'dispatch')
in the navigation bar (./app/components/NavBar.tsx:38:99)
zero
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?
Are you still experiencing this issue? if so try declaring 'const data = client.fetch(query)' in the getData function
@@muktarayodeji7257 Thanks for replying, my problem was with a jsx file extension that should have been tsx.
Nice video!
Could this be deployed for real world use?
I'm just thinking about how it would work if you had customers - there isn't a register/login/user account area so would they be able to see previous orders etc?
Thanks,
well, it can be deployed for real world use, but I would definitely NOT recommend it. This ecommerce store is very "basic" and as you already mentioned features like account are not implemented. Also, I would not really recommend using stripe for Ecommerce for various reasons. Therefore, my recommendation is either you invest a lot of time and create a custom ecommerce storefront or just use Shopify, which makes it like 1000x easier.
why stripe isn't a good option and what is alternative@@janmarshalcoding
Can I ask please?
Why stripe isn't recommended for real life use?@@janmarshalcoding
@@janmarshalcoding add next-auth for login and user information , or any other ?
Can you make an e-commerce applications using next js 14 and mongodb
I dont like MongoDB
Is it practically applicable
I'm getting this error on my lib/sanity.ts file: Value of type 'typeof ImageUrlBuilder' is not callable. Did you mean to include 'new'?ts(2348), the line is const builder = ImageUrlBuilder(client); can someone help me?
You are importing the type, you need to import the function with lowercase imageUrlBuilder
use this code. it will fix your mentioned issue.
=========================================
import imageUrlBuilder from '@sanity/image-url'
const builder = imageUrlBuilder(client)
when clicking the checkout button not directed to the stripe link I see the console server not responded 404 how do I fix it
hi. Have you resolved this? i'm also experiencing a similar issue myself
Hello Jan! First of all, great tutorial, thank you! Great explanations on every aspect. Subscribed! However I'm facing hydration error when I wrap my entire DOM with the CartProvider: Error: Hydration failed because the initial UI does not match what was rendered on the server. I don't see this happening on the video while following you along. Could you help me fix this? Thanks!
Hey Pasztor 👋, I appreciate it, thank you. So to clarify when you don't add the cart provider you get the hydration warning but if you don't, you don't get one? Could you also test if you get a hydration warning in the incognito tab?
@@janmarshalcoding Thanks for the quick response! Yes, I've already tested in incognito, but the issue seems to come after the fact that we are trying to embed a server component inside a Client component which CartProvider is.
So without seeing your code, I can't definitely say where the error comes from. I personally dont think that there is a error with the cartprovider since i did not have any problems with hydration but rather with html element nesting or not closing tags.
Now there to things we can do, you can check your code against my in my GitHub and learn how to debug code (the preferable way...)
Or even tough I don't like offering this, you can send me your code by email, and I will try to look at it when I have the time.
@@Isticsek is your issue resolved ?
@@abhishekgiri013 unfortunately nope. But I guess the issue was that we try to use a server component inside a client component.
how do you do yo make your build so fast when you type 'npm run dev' without taking so an eternity to compile???
The power of video edits... 😂. But yeah, the dev startup can take a few secs
Do you know why I cant query into my sanity studio? its saying "Cannot read properties of null (reading 'image1')". When I console log it out its saying that my query is null like its just not returning any data my code looks the same as yours. Thank you
nvm I just had to update my projectID in the lib/sanity.ts I guess my project was never connected to my sanity server.
@@KingPacavisionhow did you fix it? I'm getting the same error, and project id is already updated.
Got it resolved. First check the query if it has any value reflected as "null" on the vision page. Update the sanity content page with valid value. Then go to lib folder, sanity.ts change the useCdn as false.
After setting up my sanity studio with the initial data it worked, but whenever i make a change and publish it, it still shows me my previous data in my next app. I even had to delete some data in the studio but the changes are not reflected in the next app
Did you add revalidate tags ?
@@janmarshalcoding Where should I add it? I didn't see that in the video. If it's in the video please paste the timestamp
Well it’s at the end of the vid, 3 hours mark or so
I don't know, can sanity work with user authentication tools like auth.js or clerk
It works with NextAuth, there's a plugin: npm i next-auth-sanity
@@MarosiMate-sq2wm alright. will surely check that out ☺
I am getting this issue : github.com/shadcn-ui/ui/issues/1129 Can you help please?
Can you help? I can't the hero images from sanity. Its "null" after I console.log
i have the same problem have you found a solution?
Are you still experiencing this issue? you can try referencing the image as a url in your groq query e.g "image": image.asset -> url or you can access the first image url if you set it as an array in sanity e.g "image": image.asset[0].url
how do you create the logic for the see all? how come you didnt go through it?
nvm I got it to work
✅🚀
@@janmarshalcoding literally realised we done it twice during the project 😂 love the video mate
Error: Cannot read properties of null (reading 'image1')
if you add export const dynamic = "force-dynamic"; to the root page it will work, had same problem
@@MrMrkram18 even after adding the export above, it didn't fix the issue for me
@@loveonerif you selected html element using js... Then correct them
check the const query = " here spells"
@@MrMrkram18 can u explain more detailly pls
Hello Jan first amazing project and tutorial but I have a error can you help me to fix :
Unhandled Runtime Error
Error: Cannot read properties of null (reading images')
Source
app \product\[slug]\page.tsx (39:37) @ images
37.
38
39
‹div className="mx-auto max-w-screen-xl px-4 md:px-8">
‹div className="grid gap-8 md:grid-cols-2">
«ImageGallery images={data. images} />
C
40
4.1
42
Show collapsed frames
‹div className="md:py-8".›
‹div className="mb-2 md: mb-3">
Is it fixed getting the same error?
1:25:00
51:49
Thanks, Jan for this wonderful video tutorial, I have learned a lot. However I am getting this error message when I click on the checkout button in the console: "IntegrationError: No such plan: '4c2f6f9d-31dd.......'".
I have checked online to resolve the error but haven't gotten an answer yet. Please can you help?
Hey, please check two things: have you enabled the client only integration and did you use the price Id? In stripe there are two id’s and you need the price id
Yes, the client only is set and I used the price id generated for each product. the price id starts with price_ right?@@janmarshalcoding
Yes... Can you go into stripe dashboard and check the logs and tell me what is says when you try to check out
@@janmarshalcoding This is the response from the log: resource_missing - items
No such plan: '4c2f6f9d-31dd-4ab4-ad5a-4e075f70c14e'
Status: 400 ERR
Ok so the error tells you that such ID does not exist, this is also correct since as you already mentioned the stripe id starts with price_. So going from that I'm pretty sure you are passing the wrong id to your AddToBag component. It seems to me that instead of the price_id you are passing the id of the product to stripe, which is generated by sanity. Thats why stripe is throwing a error since id that you pass is not equivalent to the stripe price_id. Based on this, Please check your props
The explanation and the contents are good. But imagine if you're building an application for a client. Creating the price ID from Stripe and adding it to the sanity is a bit annoying.
You could always listen to a webhook and do it that way. But that's to overkill for this free vid.
@@janmarshalcoding Do you mean whenever you create a new product in Sanity, you will add this through the Stripe api in the Stripe dashbooard?
Nah its not annoying at all im agree with u if u have hundreds of item bu t for small businesses it is okay
Really cool, but what's the incentive for developers to build e-commerce websites (or people with no coding experience who want to set up a ecommerce website) when you have sites like Shopify and Squarespace thay have this already?
Well, the question is what do you need… Something not all too complex with groundbreaking design, then Shopify and its alternatives are fully ok. I mean, Gymshark scaled with Shopify to a multi Billion Company. But if you want 100% control over your store or can't use Shopify (certain Countries are Sanctioned/Banned), you don't really have a choice but to build the store manually.
How will the owner of the e-commerce website knows what all order has been made and who did it?
Stripe Dashboard
@@janmarshalcodingokay great, but I cannot get the user delivery address, how can I have that
Is the website responsive on mobile?
yeah
vscode theme pleaseeee?!!!
Aura Theme
is it responsive?
yeah
Why i can't deploy I follow all steps deploying failed but its working in localhost
whats the error?
@@janmarshalcoding Type error: Cannot find module '@sanity/vision' or its corresponding type declarations.
Error: Command "npm run build" exited with 1
You forgot to add the .vercelignore, i talk about it in the vid
@@janmarshalcoding i already have it and I put sanity there
MAFIA
Is this project responsive
yeah
at 53:06 u just go back to sanity my sanity wont even open anymore its so Infurating
Cd into sanity and run npm run dev
are you german?
ja...
it the 8th minutes of video, I find this is another kind of tutorials watching from second monitor and coding in first monitor to show like I am a developer, I think better to try record a video that shows real development life, it is not realistic at all.
by the way All my respect to what you are going to do and teach what you can but it's not really the way
With all my respect, this is a free tutorial... I understand your concern, but at the end of the day, UA-cam is not my job and i don't get any money from this. Anyway... I think it's great if there is more content on UA-cam, so i highly encourage you to create your own videos, so others can learn. Thanks and good luck
@janmarshalcoding Think about it, what you do is respectable, I just said my opinion.
What a great project!! I have created it. Kindly share your Linkedin id then tag it.