You opened my eyes to fetching in parallel, typing and much more. Thank you, Dave! You always go much more in details even than these paid courses. I appreciate your valuable time spent on creating these series!
Thank you for this series, Dave! It helps me a lot. There are a few VS Code extensions (like "JSON to TS") that can convert the copied JSON object from the clipboard into a type.
Thank you for making these videos! I dont know TypeScript but I can easily follow along in JavaScript even with all the current changes in Nextjs, you're an amazing teacher!
Hi Dave, I really like your videos on Nextjs. You get to the point without wasting time with layout for example and you structure your application correctly unlike a lot of other people!
Thanks friend Dave, I was waiting for the video... I'm going to watch it now..... Hopefully the scope of this (video series) can talk about next-auth, prisma, mongo and the security part..... just some tips so that you can take them into account to evaluate and see if you can add them to this fantastic series of NEXT Thanks again for sharing your knowledge. Greetings from Venezuela your friend Jose Grillo
Watched the whole video though i am not currently writing any next js code. The content is really good. I hope to comeback soon when i feel ready for next js.🙂 Thank you🙏🌟❤️
I came here expecting to figure out how Next Js works. Wasn't expecting promises to finally click. Just had a eureka moment after ages using promises based on my memories from cramming and repetition. pretty sweet! lol.
Can't wait to see how to implement route protection in NextJS like in the previous traditional ReactJS tutorial using JWT access & refresh token & HTTP only cookie :)
I love your tutorial as well, thanks. For the user type, I would use either interface or class to strongly type the user object, instead of using type, just my opinion.
TypeScript is strongly typed. The choice of type or interface doesn't change that. It is often preference. I use type most of the time, but when I use classes I prefer interface.
I always put my lib directory there, but all of these are preferences. You can place them where you want to. Devs debate whether to use the types.d.ts file or create a directory for types. I've done both before.
hi, and a big thank you for making these series of next.js tutorials. Question is there any particular reason why we are avoiding fat arrow function when defining these components??? I noticed in lessons 1 and 2 you avoiding the fat arrows functions
Hello.Great tutorials. I learned so much from you. I have a question tho. How can i create a database much like jsonplaceholder one,so i can access each one of my users by their id as an individual page? I think its some routing thing,but i could not find anything about it on internet.
You can create many different kinds of databases. MongoDB is a NoSQL database solution I like. For SQL, you could use Postgres or MySQL on PlanetScale.
@@DaveGrayTeachesCode i guess im not very advanced in it yet then. But its fine. Thanks for the great tutorials. I was trying to find some good stuff on youtube,but after i found your chanel,i really dont need to go anywhere else. So much content explained so well.
It currently only does this in production, not dev mode. To see the exact behavior I get in this video, install the version of Next.js listed in my package.json in the provided source code.
Sir, really follow you . Your are such great mentor and teacher, please main node js with stripe method and connect to shopify, or any course please recommend me ?
Hi. I have a question about dynamic metadata. I get an error: The Next.js 'generateMetadata' API is not allowed in a client component. How can I use generateMetadata in the client component?
You cannot use it in a client component. It is generating metadata for static pages and a client component has interactivity = not static. Ideally, you would have "islands" of interactivity in an otherwise static page so you could have metadata for the static page that has a client component within.
Dave, how would you implement a solution where the user page (child) get its data from the users page (parent), as opposed to fetching data again for the (child) user page? I know that it’s not necessary for your page, but I have a use case where I need to do something like that.
When pages change, if you are passing data, it is going to come from params. However, remember that fetches are deduplicated. If you need the same data as before, just fetch again. It does not create a duplicate request. The docs recommend "fetch where you need to".
@@DaveGrayTeachesCode I find it a bit hard to wrap my brain around. I mean you do a fetch on a promise, which implies that if the promise has finished it managed to get the data. So in my child page I need to do the same fetch on a promise again, but in the background it does not repeat this cycle as its the same request?
Thank you Dave,you're the best teacher .I 've a small request concerning implementing Swiper slider with Next13,it've tried it but it's not working with nextjs but it works with React ..do have any idea about that ?
Thanks for this awesome tutorial Dave :) Could you tell me why you don't need to use UseEffect on your components to fetch data at the initialization ? (for exemple on the usersPage). Thks :)
You can fetch in a server component without useEffect. The UsersPage is a static component so we are not thinking about re-rendering it in this situation either. It simply fetches the data, renders on the server, and is sent out to the CDN. Next.js 13 Fetch reference: beta.nextjs.org/docs/data-fetching/fundamentals
hey Dave, i havent migrated my old personal project built with the pages router to the app router but is it possible to use the metadata API with the pages router? i just wanted to implement the metadata API feature over my custom Next Head component as a challenge if possible. would the use of the metadata API be ok to use over the custom Head?
Dude this is amazing! I'm newbie using Next and I've been doing an app to practice with some requests and I didn't know the right way to handle it, It helped a lot, thanks for all, new sub, tuned for more! 🤍
Can you make a video about how Next js works in Client and Server side I mean when I wrap a server component with a client component does that mean the server component will be treated as a server component ? not sure but I think it is No
Hi Dave, love your tutorials. God bless you< I'm wondering what's the difference (pros/cons) of using '/app/users/[userId]/routes.js' instead of your directory of 'lib' directory?
The lib directory is for functions I may use in more than one place. It is short for "library". The other is a dynamic route. Note, it should end in route.js or route.ts and not "routes".
there's any difference between eatch other? 1: const userData: Promise = getUser(userId) const user: User = await userData 2: const user: User = await getUser(userId) both worked here.
The difference: You are not awaiting getUser() in the first one. That could allow you to start other requests as well and then await all of them in Promise.all or Promise.allSettled. This is in the docs under Parallel Requests.
I'm just starting to watch this awesome tutorial but I think that fetching on hover Is not working for V13.4, but docs say it's working but some github issues say it's not working in that version, so I will hope if you can tell is it still working or not? docs say it's working in production but it's not working also
36:51 I see that they removed this workaround from the docs. But it is still needed in the code to work. Version: next.js 13.2.4 I still get: 'UserPosts' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2786)
Hi Dave, can you make tutorial for this. my friend have backend auth and return userData, token, refresh_token. how to handle this case in a proper way
As of Next 13.3 create-next-app puts the font import in the root layout file and the class name on the body tag by default... someone at Vercel watches Dave!
I love spending time on your UA-cam channel coz that is where all useful information I need is coming from.
Thank you Dave.
You're very welcome!
You opened my eyes to fetching in parallel, typing and much more.
Thank you, Dave! You always go much more in details even than these paid courses. I appreciate your valuable time spent on creating these series!
You're very welcome!
This is no doubt the best channel for teaching Front-end development thank you so much MR.Dave
Thank you!
Thank you for this series, Dave! It helps me a lot. There are a few VS Code extensions (like "JSON to TS") that can convert the copied JSON object from the clipboard into a type.
Nice tip!
that plugin you mentioned is a huge game changer!! thank you for the recommendation
You know i have watched a lot of tutorial but your tutorials are the real deal honestly speaking you are the best instructor i could ever found
Thank you for the kind words! 🙏
Thank you for making these videos! I dont know TypeScript but I can easily follow along in JavaScript even with all the current changes in Nextjs, you're an amazing teacher!
Thank you a ton Dave! you are a life saver
Please consider integrating next auth for this project, it would be amazing
It is a popular request! Fundamentals first but we'll see how it all goes 🚀
@@DaveGrayTeachesCode appreciate that! Thank you for considering it.
Waiting impatient for the next great video.
Happy weekend!
Hi Dave, I really like your videos on Nextjs. You get to the point without wasting time with layout for example and you structure your application correctly unlike a lot of other people!
Thank you!
Thanks friend Dave, I was waiting for the video... I'm going to watch it now.....
Hopefully the scope of this (video series) can talk about next-auth, prisma, mongo and the security part.....
just some tips so that you can take them into account to evaluate and see if you can add them to this fantastic series of NEXT
Thanks again for sharing your knowledge.
Greetings from Venezuela your friend Jose Grillo
Thank you Jose. I'm going to focus on Next.js - I have other videos for Mongo for example. However I may need to use some other tech in a project.
@@DaveGrayTeachesCode Gracias
Hello Dave
I will be very grateful if you please cover entire React Native App Development in near future.
Thanks a lot.And simply you are the best 🙏
Thank you for the request!
Thanks a bunch. You never disappoint Dave. I'm a aspiring mern stack developer. There's always something new to learn from you. 😊
If you'll add ts to your snippet it will add type Props to your function declaration..
Ex: rfc will be tsrfc
Useful! 💯
Watched the whole video though i am not currently writing any next js code. The content is really good. I hope to comeback soon when i feel ready for next js.🙂
Thank you🙏🌟❤️
Good plan!
Just wanna say thank you, Dave! Your NextJS tutorial is the best, hands down.
Happy to hear that!
What a great lesson! Especially for me as a junior this is pure gold
Glad it was helpful!
thank you dave best teacher ever
Thank you for the kind words! 🙏
Thank you Dave!
Welcome!
Excellent pacing and editing make this tutorial a joy to watch.
Glad you enjoyed it!
Excellent tutorial. Explaining everything even if it's little, even if it's not related to the topic, is great.
Glad to hear that!
great tutorials as always Dave, you make the internet a better place for learning!
Clear and concise. You make an excellent teacher.
Thank you!
Excellent, Dave. Thanks. I like the way you teach.
Hello Dave, on 20:41 when you hover over the link it starts prefetching the data however on my end it does not?
me too, It does not prefetching the data when I hover Users Link
I came here expecting to figure out how Next Js works. Wasn't expecting promises to finally click. Just had a eureka moment after ages using promises based on my memories from cramming and repetition. pretty sweet! lol.
Glad to hear it!
Keep it coming man. You're awesome 👌
Thanks! Will do!
Insightful and to the point, as always. Your channel has been a goldmine, Dave. Thanks for all you do.
You're welcome!
Thank you very much Dave. You explain with every single detail 🙏
Glad it was helpful!
Nothing but compliments after watching your excellent video. Well and clearly explained!! Thanks a ton.
You're welcome!
Excellent lesson, going for the next!!
Awesome tutorial with the latest features of NextJS ! Thank you Dave !!
Glad you liked it!
Thanks Dave, I love this series and all your videos in general . I would love it if you could cover the integration of next 13 with material ui
Thank you for the request!
I came here for that typescript error, thank you for pointing out that documentation.
You're welcome!
Thank you for great tutorial series! ❤ 😊
Can't wait to see how to implement route protection in NextJS like in the previous traditional ReactJS tutorial using JWT access & refresh token & HTTP only cookie :)
That could be interesting. Fundamentals first 🚀
Hello Dave, Thank you very much for giving us such a wonderful series.
You're welcome!
I love your tutorial as well, thanks. For the user type, I would use either interface or class to strongly type the user object, instead of using type, just my opinion.
TypeScript is strongly typed. The choice of type or interface doesn't change that. It is often preference. I use type most of the time, but when I use classes I prefer interface.
Thanks for this Dave. Much appreciated the efforts. 🙏🏻🙏🏻
Glad you enjoyed it!
Hi! I wanted to ask about the reasoning behind placing the types and lib in the root directory. Thanks!🙏
I always put my lib directory there, but all of these are preferences. You can place them where you want to. Devs debate whether to use the types.d.ts file or create a directory for types. I've done both before.
this code is above my head 🔥🔥🔥🔥
Take it slow and review the prerequisites listed in the course resources if needed.
hi, and a big thank you for making these series of next.js tutorials.
Question is there any particular reason why we are avoiding fat arrow function when defining these components??? I noticed in lessons 1 and 2 you avoiding the fat arrows functions
Sticking with the same pattern you see in the Next.js docs.
Just learned the difference between 'single quotes' and `backticks` from this video. Could't figure out why string literals never worked for me 😅
Very explanatory... Thank you dave
Very welcome!
Thanks a lot sir ! I can understand it clearly
thanks Dave, I believe this video belongs to the nextjs playlist too.
It does! If it is not there, I will add it. 🚀
Super.... i love its..awsome master ji..... please complete the NExt js project its really really awsome......
Keep going! 🚀
Dave,
thanks
Welcome!
Dave is the best !
Thank you!
Thank you from France
You are welcome!
Hello.Great tutorials. I learned so much from you. I have a question tho.
How can i create a database much like jsonplaceholder one,so i can access each one of my users by their id as an individual page? I think its some routing thing,but i could not find anything about it on internet.
You can create many different kinds of databases. MongoDB is a NoSQL database solution I like. For SQL, you could use Postgres or MySQL on PlanetScale.
@@DaveGrayTeachesCode i guess im not very advanced in it yet then. But its fine. Thanks for the great tutorials. I was trying to find some good stuff on youtube,but after i found your chanel,i really dont need to go anywhere else. So much content explained so well.
Awesome! Will this work to add Rich Snippets/ Schemas for SEO ?
Thank you very much for your valuable time and dedication. I am waiting for the next tutorial
You're welcome!
Thanks for making this awesome tutorial.
You're very welcome!
This next videos is really good. Thanks 🙏
Glad you liked it!
would really love a fullstack application with nextjs 13 app and prisma thank you for all the tutorial videos!!
Nice request!
Thanx Dave, very informative.
Very welcome!
Very cool. Thank you Dave.
Welcome!
Very nice and informative, keep it up!
Thanks, will do!
Thanks you Dave!❤
You're welcome!
really nice tutorial man ! :)
Thank you!
I can't see prefetching in devtools of users/:id pages when hovering on links? What could be the reason?
It currently only does this in production, not dev mode. To see the exact behavior I get in this video, install the version of Next.js listed in my package.json in the provided source code.
@@DaveGrayTeachesCode Thank you for answer.
謝謝你，Dave
Welcome!
I have some problem in understanding this , can you make a simple video on this topic
amazing tutorial
Nextjs 13.2 totally changed the way we used to do for api
Yes, it has changed a lot!
Thanks for the clear explanation
You're welcome!
Sir, really follow you . Your are such great mentor and teacher, please main node js with stripe method and connect to shopify, or any course please recommend me ?
Thank you. No recommendations on course with stripe or shopify, but thank you for the request!
@@DaveGrayTeachesCode sir, please can you guide me about or make anu video node express with stripe method. Thank you
Hi. I have a question about dynamic metadata. I get an error: The Next.js 'generateMetadata' API is not allowed in a client component. How can I use generateMetadata in the client component?
You cannot use it in a client component. It is generating metadata for static pages and a client component has interactivity = not static. Ideally, you would have "islands" of interactivity in an otherwise static page so you could have metadata for the static page that has a client component within.
Dave ❤ priceless 🙏 It would be nice if you would go just a bit slower in the next tuts 😊
Thank you! This was already a long one - lots to discuss 💯
Thank you for this amazing tutorial
You're very welcome!
Thanks Dave!
Welcome!
Dave, how would you implement a solution where the user page (child) get its data from the users page (parent), as opposed to fetching data again for the (child) user page? I know that it’s not necessary for your page, but I have a use case where I need to do something like that.
When pages change, if you are passing data, it is going to come from params. However, remember that fetches are deduplicated. If you need the same data as before, just fetch again. It does not create a duplicate request. The docs recommend "fetch where you need to".
@@DaveGrayTeachesCode I find it a bit hard to wrap my brain around. I mean you do a fetch on a promise, which implies that if the promise has finished it managed to get the data. So in my child page I need to do the same fetch on a promise again, but in the background it does not repeat this cycle as its the same request?
Thank you for the video!
You're welcome!
Thank you Dave,you're the best teacher .I 've a small request concerning implementing Swiper slider with Next13,it've tried it but it's not working with nextjs but it works with React ..do have any idea about that ?
Thank you! I do not have a solution for your question as I have not worked with that yet.
@@DaveGrayTeachesCode thank you I appreciate the response
Is it posible to make dynamic route with complex type? For instance using type person {id:1,age:10} instead of string?
Thanks for the video. Curious, what theme are you using?
My theme choices: ua-cam.com/users/shortsdp4u1NNFhtE
So the layout at a lower level in the file hierarchy is 'in addition to' the layout that is coming from upstairs, and not 'instead of'. Correct?
Yes, that is correct.
Thanks for this awesome tutorial Dave :) Could you tell me why you don't need to use UseEffect on your components to fetch data at the initialization ? (for exemple on the usersPage). Thks :)
You can fetch in a server component without useEffect. The UsersPage is a static component so we are not thinking about re-rendering it in this situation either. It simply fetches the data, renders on the server, and is sent out to the CDN. Next.js 13 Fetch reference: beta.nextjs.org/docs/data-fetching/fundamentals
hey Dave,
i havent migrated my old personal project built with the pages router to the app router but is it possible to use the metadata API with the pages router?
i just wanted to implement the metadata API feature over my custom Next Head component as a challenge if possible.
would the use of the metadata API be ok to use over the custom Head?
Prefetching on hover doesn't seem to work in NextJS 14.0.4
Production mode only now
16:32
this async function and await will work fine without Promise
const userData will infer Promise
Do you think it's a bad practice?
Avoid any whenever possible.
excellent tutorial
Thank you!
Dude this is amazing! I'm newbie using Next and I've been doing an app to practice with some requests and I didn't know the right way to handle it, It helped a lot, thanks for all, new sub, tuned for more! 🤍
Glad I could help!
Hello Dave, Next 13 is available for production?
Answered in the first minute of the video 🙂
It's in beta
Dave … is there away to watch entire series ? Or we have to wait to the next recording every now and then ?
I am releasing one every week.
@@DaveGrayTeachesCode can’t wait 🙏
Can you make a video about how Next js works in Client and Server side
I mean when I wrap a server component with a client component does that mean the server component will be treated as a server component ?
not sure but I think it is No
That is coming very soon.
If I correct understand now we do not have the getServerSideProps function as in Next12?
Hi Dave, love your tutorials. God bless you<
I'm wondering what's the difference (pros/cons) of using '/app/users/[userId]/routes.js' instead of your directory of 'lib' directory?
The lib directory is for functions I may use in more than one place. It is short for "library". The other is a dynamic route. Note, it should end in route.js or route.ts and not "routes".
there's any difference between eatch other?
1:
const userData: Promise = getUser(userId)
const user: User = await userData
2:
const user: User = await getUser(userId)
both worked here.
The difference: You are not awaiting getUser() in the first one. That could allow you to start other requests as well and then await all of them in Promise.all or Promise.allSettled. This is in the docs under Parallel Requests.
I'm just starting to watch this awesome tutorial but I think that fetching on hover Is not working for V13.4, but docs say it's working but some github issues say it's not working in that version, so I will hope if you can tell is it still working or not?
docs say it's working in production but it's not working also
36:51 I see that they removed this workaround from the docs. But it is still needed in the code to work.
Version: next.js 13.2.4
I still get:
'UserPosts' cannot be used as a JSX component.
Its return type 'Promise' is not a valid JSX element.
Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2786)
I'd suggest using the workaround until it is not needed. I'm surprised they removed it from the docs if it is still needed.
Thank you so much am really grateful
You're welcome!
Hi Dave, can you make tutorial for this.
my friend have backend auth and return userData, token, refresh_token. how to handle this case in a proper way
Awesome!
Thanks!
Can I use NextJS experimental feature in my production app or should I go with the previous technique ?
It's up to you. They don't recommend it. These new features should be out of beta soon.
As of Next 13.3 create-next-app puts the font import in the root layout file and the class name on the body tag by default... someone at Vercel watches Dave!
Nice!
keep going 👌🏼
You are amazing
Thank you!
Hi Dave when I try to hover over the users link to pre- fetching is not happening for me don't know why can you help me resolve
Hi, excellent tutorial! Do you know if this app can be deployed on firebase hosting? Or next 13 is not compatible, I would appreciate the information!
This might help - it does not specify 13 or not: firebase.google.com/docs/hosting/nextjs
excellence tutorial