Next.js 13 Full Stack E-commerce App #32 | Connect to MongoDB Atlas, Deploy on Vercel
Вставка
- Опубліковано 5 чер 2023
- Git Repo Link:
github.com/ghulamabbas2/buyit...
Checkout my In-Depth Next.js Masterclass on Udemy Courses:
www.udemy.com/course/nextjs-b...
Next.js Authentication with Next-Auth:
• Next.js Authentication...
================================================================
⚙️ Gadgets I use for Recording:
💻 Laptop - Macbook PRO M1 - 16/512
amzn.to/4eUqrSe
🎤 MIC - Samson Technologies Q2U USB/XLR Dynamic Microphone
amzn.to/3W9Z4wl
🖱️Mouse - Logitech G402 Gaming Mouse Hyperion Fury USB, Black
amzn.to/3RY4xUy
⌨️ Keyboard - Logitech K380 Multi-Device Bluetooth Keyboard
amzn.to/3RY4Fn0
🖥️ Monitor - UltraSharp 24-Inch Screen Led-Lit Monitor (U2419H)
amzn.to/4bxidN6
================================================================
Welcome to episode 32 of our Next.js 13 Full Stack E-commerce App series! In this tutorial, we will guide you through the process of connecting your Next.js application to MongoDB Atlas, a fully managed cloud database service and deploying your app on Vercel, a powerful hosting platform.
If you're ready to level up your Next.js development skills and build a powerful e-commerce app, join us in this exciting episode! Don't forget to like the video, subscribe to our channel, and hit the notification bell to stay updated with future tutorials. Let's dive in and create something awesome together!
@codingwithabbas, thank you mate for all the work you have done. It was a great project that will serve me. I had to fix some important bugs due to major changes of libraries but i managed to make everything work with less warnings. So, really, thank you for the time you invested
Glad it helped
@@codingwithabbas when we ae production mode, why does req.files is empty ? the uploadingMiddleware is telling that there is an image but i log req.files, there is not an image and it's only in production mode
Than you so much , i done your Udmey cources in the past and this time it was free, thank you so much you are amazing,
Thanks mate!!
Hey Abbas? How does this multer work in production. Vercel doesn't allow/access files that are not statically generated in the buildtime in the public directory. How could we fix this
A great product Abbas, many thanks once again!
I'm in the process of adding improvements and I'm trying to understand why the preview image (setPreviewImage()) function in ProductDetails.jsx doesn't work with the NextJS image component, only with the tag - I tried swapping them out as the images are pretty big and really should be optimised but it simply doesn't work - so we're forced to use the tag but I can't understand why? I was wondering, previously, why you had not used the Image component in some places and I'm assuming this was the reason - but why? (I know Cloudinary applies some optimisation already, but the Image component is an extra help)
Thanks in advance
Terry
OK, I found out why, for anyone else who's wondering:
The reason this doesn't work with the Next.js Image component is because the Image component is not just a wrapper for the native tag. It provides additional functionality, such as automatic image optimization and different layout modes, and it doesn't expose the same properties and methods as the native tag.
In our case, we're trying to set the src property of the Image component, but this property is not exposed in the same way as it is in the tag. The Image component doesn't allow direct manipulation of the src attribute using a ref as you would do with the native tag.
For the Next.js Image component, the src attribute is passed as a prop at the time of rendering and can't be changed afterwards in the same way as in the tag. If you need to change the src of an Image component after it has been rendered, you would typically trigger a re-render of the component with a new src prop.
Can you please tell me which state management has been used in this project?
@@manishneog9595 We're using a mixture of createContext and useState from React
What you have used for state management in this project ?
Context API.
@@codingwithabbas I am getting an error when I try building it locally. any help is appreciated.
Generating static pages (20/22)
Error occurred prerendering page
Build error occurred
Error: Export encountered errors on following paths:
/admin/products/[id]/page: /admin/products/[id]
/admin/products/page: /admin/products
/page: /
🥰🥰🥰🥰
Deployment site doesn't work, seems like the server codes like the APIFilters don't work with Vercel. Can we get a fixing video for this problem please?
You're not alone in that.
did yo have a fix?
@@adityakaustavdas6307 sadly no, I just abandoned the project altogether
Has anyone got this working properly online/in production yet? Pagination is not working for me at all - all pages are showing the 1st 2 products - zero errors in console
Can you add new order and see this order in your backend?
@@jhonnatancorrea5211 Nope, add to cart isn't working either - I don't understand why Ghulam didn't test any of this in the video - I had to fix loads of build errors too. Can we get a debugging video?
Is pagination working for you?
The errors being thrown on the production version are unusable - but I'm getting none in my local version - immensely frustrating
I'm gonna add a try-catch block to literally everything, see if that helps
@@TerryMitchell For me all works fine except the new orders, we can share files.
Right, I gave in and used Abbas' final repo (hangs head in shame) with my next.config and the problem persists, exactly the same *#!! problem - even when running the production build locally (so it's not related to Vercel) I've triple checked all my env variables - they work fine in Dev mode, so they must be correct. My brain is fried - gonna sleep on it.
Hello dear teacher, first of all I want to tell you thank you. Please could you verify the cart, I can not see any new order, I can see my order in Stripe, but in the admin of the app i can not. Thank you soo much!!
What you have used for state management in this project ?
@@manishneog9595 Can you add some order and then you can see this order in your backend?
you need to have the stipe cli running to get the order appear in my orders.
@@DipsNohawar Thank you!!!
@@jhonnatancorrea5211 have you successfully deployed the project to vercel with pagination and all working ?
You fixed the issue I've reported on your #27: ua-cam.com/video/Zng5kXoq4C4/v-deo.html
Thanks!
You can add another orders and see this orders in the admin panel?
Have you actually got this working in production? - I'm getting zero errors locally in dev mode and pretty much nothing is working in production, pagination is showing the 1st 2 products on every page, search isn't working and I can't add anything to the cart. I've compared with Abbas' code and there are actually less errors in mine - some of his components still have 'class' instead of 'className' - I'm really surprised nothing was tested in the video :(
@@TerryMitchell it is working for me. Have deployed it to AWS and it’s rocking. He has fixed now this error so everything is perfectly fine.
@@AfonsoFilipeJr You can add other orders and see them in your admin panel?
@@TerryMitchell Just in localhost