Give Taskade a try - www.taskade.com/ Use Coupon Code 'CODEVOLUTION' for 50% OFF lifetime discount applied to any upgraded subscription 1st 100 viewers to contact via www.taskade.com/contact get the upgrade for free!
2:10 how to make this index.js list dynamic? so i just need to edit the productlist.json and the list on /products extents automatically when the corresponding .json array is extended as well?!
I just created a new VS Code Next.js app, to get about page to open, I had to create a src\app\about\page.tsx. I can't find any files hard codes to "page.*". Is there a video on how this is working?
Hey great tutorial as always. I have a quick question here if anyone can help me out. If we have a folder name let's say "product details" under pages folder, then how to route on this page? What would be its url? Please help.
i dont get the point. what is the use of the dynamic route if we had to create separate file for fixed path? and so on we would need to create other files for specific information. then whats the difference between this and using non dynamic route?
4:21 It already has a context and that's product. So simply using id makes more sense. Imagine having a product object, or database table, and then naming its ID property, or column, as productId. Isn't that unnecessarily repetitive? And if you do that for every object, one won't intuitively be sure of the ID property name for the object in question while writing client code until one checks. Just use ID and one less burden to slow down dev time.
Should not this be router.params.productId, instead of router.query.productId? Just popped up in mind comparing with Express.js and also productId is not a query string as well.
Yo made the Seater page with starting Capital S and in the page name and that's make conflict, try to make it sweater with no caps and will showing the sweater page instead of product derails page ;)
Hey in next js you always have to export the components as default export you cannot simply export them individually as we can do in react. That is why you are getting the error.
@@hrishikeshshinde6189 oh yeah, you are right. I Figured out that, I actually wanted to reply to my self telling the others about it but I forgot. Thank you man. Keep going 💪
so easy. Look 1) First create a folder named "product". Then 2) Create a folder named sweater under that folder. 3) Under Sweater directory create a folder named [pid] 4) Now under this folder create a file named [uid].jsx Thats it man and you will be good to go.
Yes, this is what I was looking for. So in the pages directory I create a file named users/[id]/verify/[token].js and it creates that folder structure you have there and whatever component I create in the [token].js file shows when I got to a route like localhost:3000/users/234890fh/verify/2398fhaaeh
Give Taskade a try - www.taskade.com/
Use Coupon Code 'CODEVOLUTION' for 50% OFF lifetime discount applied to any upgraded subscription
1st 100 viewers to contact via www.taskade.com/contact get the upgrade for free!
The best web developer instructor ever.Thankyou brother for this video !!
I really love the simplicity of your explanation. Thank you for this.
i really like this series. Even better than the one i have bought on Udemy.
this guy nailed it. I watched series of videos on routers none compared to his, he made it really clear and simple
Before coding you teach the concept visually(means using a diagram) is awesome.
Thanks a lot :)
Btw can i ask what stack you learnt for web development?
@@GemzProfitGaming MERN
@@iUmerFarooq but u learning next js to Make it MERN+N MERNN :D
@@iUmerFarooq im also MERN stack
the best next.js tutorial, thank you very very much!!!
Great explanation in each tutorial....🔥
Bro you are so good explaining even when my english is not that good i can understand everithing
So simple, yet so powerful. Thanks a lot for the detailed explanation.
damnn that sweater routing is magic!
As always 🔥 😍
usefull for navigating from products to single page display
Thanks buddy, God bless you.
great minset to deliver fine explanation
amazing tutorial and well explained every concepts. Thanks a lot sir.
Thanks, excellent explanation!
Really appreciated sir, very good job. Thank you very much.
What a great tutorial, everything is clearly explained in detail. Thank you Wishwash for the investment you give in this channel!!!
worth it for every version of next.js
2:10 how to make this index.js list dynamic? so i just need to edit the productlist.json and the list on /products extents automatically when the corresponding .json array is extended as well?!
Great explaining..
this works on localhost but not when i host this on firebase. it returns 404 page instead. not sure why. please help !
VERY NICE!
ProductId doesn't show up on the page. Were there changes to router tasks since this tutorial been created?
its productid
amazing tutorial!
Thank you friend
First dynamic route I've managed to get working. I wonder if there has been an update as I think there may be another way to do this now.
does it still work when you refrresh the page when editing a product ?
I just created a new VS Code Next.js app, to get about page to open, I had to create a src\app\about\page.tsx. I can't find any files hard codes to "page.*". Is there a video on how this is working?
Hey great tutorial as always. I have a quick question here if anyone can help me out.
If we have a folder name let's say "product details" under pages folder, then how to route on this page? What would be its url? Please help.
You call it « product-details »
Never seen something like this any library
thank you
i dont get the point. what is the use of the dynamic route if we had to create separate file for fixed path? and so on we would need to create other files for specific information. then whats the difference between this and using non dynamic route?
4:21
It already has a context and that's product. So simply using id makes more sense. Imagine having a product object, or database table, and then naming its ID property, or column, as productId. Isn't that unnecessarily repetitive? And if you do that for every object, one won't intuitively be sure of the ID property name for the object in question while writing client code until one checks. Just use ID and one less burden to slow down dev time.
can you make an update for nextjs 13 using the app directory?
how to route dynamically fetching api data ?
How to multiple dynmic? , like /id/year
Should not this be router.params.productId, instead of router.query.productId? Just popped up in mind comparing with Express.js and also productId is not a query string as well.
Sir looking forward for your Nuxt 3 tutorial...if any please mention link..
Webnesday series discontinued ?
It is nice video.
Yo made the Seater page with starting Capital S and in the page name and that's make conflict, try to make it sweater with no caps and will showing the sweater page instead of product derails page ;)
all these routing method is not working anymore
sad :(
I keep getting the error saying: Error: The default export is not a React Component in page: "/product"
What is this?
Hey in next js you always have to export the components as default export you cannot simply export them individually as we can do in react. That is why you are getting the error.
@@hrishikeshshinde6189 oh yeah, you are right. I Figured out that, I actually wanted to reply to my self telling the others about it but I forgot. Thank you man. Keep going 💪
@@assad.rajab-2 yes brother 💪
Playback Speed 1.25. Thank me later
FFS get to the point!. If you have to sit through this, "from the previous video" is so unnecessary
nextjs 13 version changed everything 🥲
yeah even serversideprops gone
what if i want url like localhost:3000/product/sweater/123/xyz
how will be the page structure
so easy. Look
1) First create a folder named "product". Then
2) Create a folder named sweater under that folder.
3) Under Sweater directory create a folder named [pid]
4) Now under this folder create a file named [uid].jsx
Thats it man
and you will be good to go.
Yes, this is what I was looking for. So in the pages directory I create a file named users/[id]/verify/[token].js and it creates that folder structure you have there and whatever component I create in the [token].js file shows when I got to a route like localhost:3000/users/234890fh/verify/2398fhaaeh
thanck for velag @codevoluttion