Next.js Data Fetching, Dynamic Routes & Metadata | Nextjs 13

[@leomacdon7858]

I love spending time on your KZbin channel coz that is where all useful information I need is coming from. Thank you Dave.

[@DaveGrayTeachesCode]

You're very welcome!

[@dopetag]

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!

[@DaveGrayTeachesCode]

You're very welcome!

[@osamahima6698]

This is no doubt the best channel for teaching Front-end development thank you so much MR.Dave

[@DaveGrayTeachesCode]

Thank you!

[@catalin-rizea]

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.

[@DaveGrayTeachesCode]

Nice tip!

[@CRAETION_]

that plugin you mentioned is a huge game changer!! thank you for the recommendation

[@hamzaashraf9529]

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

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@naylord5]

Thank you a ton Dave! you are a life saver Please consider integrating next auth for this project, it would be amazing

[@DaveGrayTeachesCode]

It is a popular request! Fundamentals first but we'll see how it all goes 🚀

[@naylord5]

@@DaveGrayTeachesCode appreciate that! Thank you for considering it. Waiting impatient for the next great video. Happy weekend!

[@khumanjeel7417]

If you'll add ts to your snippet it will add type Props to your function declaration.. Ex: rfc will be tsrfc

[@DaveGrayTeachesCode]

Useful! 💯

[@anantgupta7352]

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 🙏

[@DaveGrayTeachesCode]

Thank you for the request!

[@tasanee87]

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!

[@Grishopping]

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

[@DaveGrayTeachesCode]

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.

[@Grishopping]

@@DaveGrayTeachesCode Gracias

[@rastapoile]

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!

[@DaveGrayTeachesCode]

Thank you!

[@siddiqahmed3274]

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🙏🌟❤️

[@DaveGrayTeachesCode]

Good plan!

[@exciting8887]

Just wanna say thank you, Dave! Your NextJS tutorial is the best, hands down.

[@DaveGrayTeachesCode]

Happy to hear that!

[@nazar1744]

What a great lesson! Especially for me as a junior this is pure gold

[@DaveGrayTeachesCode]

Glad it was helpful!

[@willyhorizont8672]

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 :)

[@DaveGrayTeachesCode]

That could be interesting. Fundamentals first 🚀

[@Niamudeen]

Thanks a bunch. You never disappoint Dave. I'm a aspiring mern stack developer. There's always something new to learn from you. 😊

[@vramosjd]

Hello Dave, on 20:41 when you hover over the link it starts prefetching the data however on my end it does not?

[@webdeveloper371]

me too, It does not prefetching the data when I hover Users Link

[@leonomollo7836]

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.

[@DaveGrayTeachesCode]

Glad to hear it!

[@drkgumby]

Excellent pacing and editing make this tutorial a joy to watch.

[@DaveGrayTeachesCode]

Glad you enjoyed it!

[@veuler7376]

Excellent tutorial. Explaining everything even if it's little, even if it's not related to the topic, is great.

[@DaveGrayTeachesCode]

Glad to hear that!

[@khalilbenmeziane8836]

thank you dave best teacher ever

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@laurraileanu8374]

great tutorials as always Dave, you make the internet a better place for learning!

[@TravinskiyVladislav]

Thank you Dave!

[@DaveGrayTeachesCode]

Welcome!

[@markspratt7191]

Clear and concise. You make an excellent teacher.

[@DaveGrayTeachesCode]

Thank you!

[@costagmc1]

Excellent, Dave. Thanks. I like the way you teach.

[@omidsoleimani3817]

thanks Dave, I believe this video belongs to the nextjs playlist too.

[@DaveGrayTeachesCode]

It does! If it is not there, I will add it. 🚀

[@andreamagista6742]

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

[@DaveGrayTeachesCode]

Thank you for the request!

[@SAmacTut20]

Just learned the difference between 'single quotes' and `backticks` from this video. Could't figure out why string literals never worked for me 😅

[@andysfavoriterecipes3847]

I came here for that typescript error, thank you for pointing out that documentation.

[@DaveGrayTeachesCode]

You're welcome!

[@ifeanyiibe9153]

Insightful and to the point, as always. Your channel has been a goldmine, Dave. Thanks for all you do.

[@DaveGrayTeachesCode]

You're welcome!

[@ghassanclassic7689]

Thank you very much Dave. You explain with every single detail 🙏

[@DaveGrayTeachesCode]

Glad it was helpful!

[@Ellenox147]

Awesome tutorial with the latest features of NextJS ! Thank you Dave !!

[@DaveGrayTeachesCode]

Glad you liked it!

[@slowcoding]

Nothing but compliments after watching your excellent video. Well and clearly explained!! Thanks a ton.

[@DaveGrayTeachesCode]

You're welcome!

[@bobyuan5475]

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.

[@DaveGrayTeachesCode]

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.

[@franalcaraz1676]

Excellent lesson, going for the next!!

[@rohit_dev]

Keep it coming man. You're awesome 👌

[@DaveGrayTeachesCode]

Thanks! Will do!

[@nishgro191]

Hello Dave, Thank you very much for giving us such a wonderful series.

[@DaveGrayTeachesCode]

You're welcome!

[@kakun7238]

would really love a fullstack application with nextjs 13 app and prisma thank you for all the tutorial videos!!

[@DaveGrayTeachesCode]

Nice request!

[@nabinsaud4688]

Nextjs 13.2 totally changed the way we used to do for api

[@DaveGrayTeachesCode]

Yes, it has changed a lot!

[@galichandreyschool]

Thank you for great tutorial series! ❤ 😊

[@rayusaki88]

Thanks for this Dave. Much appreciated the efforts. 🙏🏻🙏🏻

[@DaveGrayTeachesCode]

Glad you enjoyed it!

[@redfanush]

Thank you very much for your valuable time and dedication. I am waiting for the next tutorial

[@DaveGrayTeachesCode]

You're welcome!

[@bharath2508]

Dave, thanks

[@DaveGrayTeachesCode]

Welcome!

[@QasisTechnologies]

Super.... i love its..awsome master ji..... please complete the NExt js project its really really awsome......

[@DaveGrayTeachesCode]

Keep going! 🚀

[@k303k]

Thanks a lot sir ! I can understand it clearly

[@akinsanmiakintunde4853]

Very explanatory... Thank you dave

[@DaveGrayTeachesCode]

Very welcome!

[@ilan117]

Dave ❤ priceless 🙏 It would be nice if you would go just a bit slower in the next tuts 😊

[@DaveGrayTeachesCode]

Thank you! This was already a long one - lots to discuss 💯

[@flaviien]

Thank you from France

[@DaveGrayTeachesCode]

You are welcome!

[@shahnawazk]

Very nice and informative, keep it up!

[@DaveGrayTeachesCode]

Thanks, will do!

[@sundeeepu]

Thanks for making this awesome tutorial.

[@DaveGrayTeachesCode]

You're very welcome!

[@Thongtele]

Very cool. Thank you Dave.

[@DaveGrayTeachesCode]

Welcome!

[@mitesh7998]

This next videos is really good. Thanks 🙏

[@DaveGrayTeachesCode]

Glad you liked it!

[@aleksandrpetrov3938]

I can't see prefetching in devtools of users/:id pages when hovering on links? What could be the reason?

[@DaveGrayTeachesCode]

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.

[@en_kratia]

@@DaveGrayTeachesCode Thank you for answer.

[@ttirasx]

Thanx Dave, very informative.

[@DaveGrayTeachesCode]

Very welcome!

[@ArifulIslam-ic7zt]

amazing tutorial

[@AndriyNosov]

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?

[@DaveGrayTeachesCode]

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.

[@h3nry_t122]

really nice tutorial man ! :)

[@DaveGrayTeachesCode]

Thank you!

[@lucasigarashi]

Thanks for the clear explanation

[@DaveGrayTeachesCode]

You're welcome!

[@ramachandra7015]

Thanks you Dave!❤

[@DaveGrayTeachesCode]

You're welcome!

[@m95f0215]

謝謝你，Dave

[@DaveGrayTeachesCode]

Welcome!

[@sonamohialdin3376]

Thank you for this amazing tutorial

[@DaveGrayTeachesCode]

You're very welcome!

[@alexanderkomanov4151]

Thanks Dave!

[@DaveGrayTeachesCode]

Welcome!

[@patite3103]

Thank you for the video!

[@DaveGrayTeachesCode]

You're welcome!

[@Mobilemaniaplays]

I have some problem in understanding this , can you make a simple video on this topic

[@adnantariq3346]

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

[@DaveGrayTeachesCode]

Sticking with the same pattern you see in the Next.js docs.

[@vikashgauravvkg]

excellent tutorial

[@DaveGrayTeachesCode]

Thank you!

[@muscaiu]

Prefetching on hover doesn't seem to work in NextJS 14.0.4

[@DaveGrayTeachesCode]

Production mode only now

[@desgnify]

Thank you so much am really grateful

[@DaveGrayTeachesCode]

You're welcome!

[@abelmurua6980]

Awesome! Will this work to add Rich Snippets/ Schemas for SEO ?

[@amitbentzvi5019]

Hi! I wanted to ask about the reasoning behind placing the types and lib in the root directory. Thanks!🙏

[@DaveGrayTeachesCode]

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.

[@kevl7129]

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!

[@DaveGrayTeachesCode]

Nice!

[@alphaomegapepega9341]

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.

[@DaveGrayTeachesCode]

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.

[@alphaomegapepega9341]

@@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.

[@bobdpa]

Awesome!

[@DaveGrayTeachesCode]

Thanks!

[@Sharky1101]

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.

[@DaveGrayTeachesCode]

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".

[@Sharky1101]

@@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?

[@okonkwo.ify18]

Dave is the best !

[@DaveGrayTeachesCode]

Thank you!

[@0xtz_]

keep going 👌🏼

[@ParmanandPatel-u8w]

excellence tutorial

[@Abdullab_Niaz-ri1sc]

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 ?

[@DaveGrayTeachesCode]

Thank you. No recommendations on course with stripe or shopify, but thank you for the request!

[@Abdullab_Niaz-ri1sc]

@@DaveGrayTeachesCode sir, please can you guide me about or make anu video node express with stripe method. Thank you

[@richthekid7522]

Thanks Sir

[@DaveGrayTeachesCode]

Welcome!

[@OnlineZiggasa]

You need to understand about single page details meta data !!!! title and other meta info get need dynamically !

[@DaveGrayTeachesCode]

Keep going. You will see it.

[@kuroisan2698]

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

[@DaveGrayTeachesCode]

That is coming very soon.

[@jamshid5995]

very awesome 👍

[@DaveGrayTeachesCode]

Thank you! Cheers!

[@mdshohidulislam5836]

You are amazing

[@DaveGrayTeachesCode]

Thank you!

[@teflonhav]

thank you

[@DaveGrayTeachesCode]

You're welcome!

[@aurelienchevillotte2874]

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 :)

[@DaveGrayTeachesCode]

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

[@donald_hook]

Thanks for the video. Curious, what theme are you using?

[@DaveGrayTeachesCode]

My theme choices: kzbin.infodp4u1NNFhtE

[@이름-f9z]

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?

[@dopetag]

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)

[@DaveGrayTeachesCode]

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.

[@nelsonurbaneja6875]

Hello Dave, Next 13 is available for production?

[@DaveGrayTeachesCode]

Answered in the first minute of the video 🙂

[@rssbasdf]

It's in beta

[@ismail-talb]

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 ?

[@DaveGrayTeachesCode]

Thank you! I do not have a solution for your question as I have not worked with that yet.

[@ismail-talb]

@@DaveGrayTeachesCode thank you I appreciate the response

[@_chaika8922]

Is it posible to make dynamic route with complex type? For instance using type person {id:1,age:10} instead of string?

[@olegmaz3969]

If I correct understand now we do not have the getServerSideProps function as in Next12?

[@joaquinarlettaz]

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! 🤍

[@DaveGrayTeachesCode]

Glad I could help!

[@laxmiprasanna4092]

prefetch on hover not working for me in next js 13.4.16

[@laxmiprasanna4092]

I guess it is available on production only and that too it preloads withour hover. every link in viewport are pre-loaded

[@hooyah]

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

[@dopetag]

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?

[@DaveGrayTeachesCode]

Avoid any whenever possible.

[@renatoAllArt]

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.

[@DaveGrayTeachesCode]

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.

[@victorkimura1]

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?

[@DaveGrayTeachesCode]

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".

[@HimanshuGogoi]

Can I use NextJS experimental feature in my production app or should I go with the previous technique ?

[@DaveGrayTeachesCode]

It's up to you. They don't recommend it. These new features should be out of beta soon.

[@nademkhan931]

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?

[@DaveGrayTeachesCode]

Yes, that is correct.