Next.js Full Course for Beginners | Nextjs 13 Tutorial | 7 Hours

[@staringintotheabyss1769]

Professor, I may not have studied a course under you in college but for me you will always be my professor, because you are the one who is making me learn.

[@DaveGrayTeachesCode]

Glad to hear that!

[@jbot8530]

Yes, you absolutely right. I feel the same, Dave you are a great teacher!!! I'm looking forward to learn from you more! Thanks a lot 😃

[@SanthoshKumar-sh5pf]

​@@DaveGrayTeachesCode Pls reply...If I know next.js is there a need of knowing node.js for backend...As it built on top of node.js...Do I need to know node.js before learning next.js....I am so much confused😢

[@JaceRivera-t2w]

@@SanthoshKumar-sh5pf You don't need a node + express backend though you can have one if you need one.

[@mdzaidsiddiqui4262]

I cannot believe you're putting all this out for free. This is THE course I'm recommending to all my friends trying to learn nextjs. You're awesome Dave! You have gained a new lifelong subscriber.

[@DaveGrayTeachesCode]

Thank you! Glad to hear that!

[@ShpatGashi-tj2op]

Same here i mean i've learned all the frontend skills through this channel now im working as a frontend junior dev, thanks alot Dave you changed my life

[@DaveGrayTeachesCode]

@@ShpatGashi-tj2op so glad to hear that!! Great job!!

[@inamullahkhan7793]

Man, you don't get tired of making such long videos and just for free. You are the best. Thanks for putting so much effort into teaching the web.❤😊

[@DaveGrayTeachesCode]

You're welcome!

[@aleddineharoba4598]

he is the hero on youtube

[@investandcyclecheap4890]

this is an awesome tutorial! But don't forget, he's getting paid from YT for our watch time :)

[@DaveGrayTeachesCode]

@@investandcyclecheap4890 not much. The inspiration for and the reason behind this channel is a dedication to teaching and helping others. There is not much money in creating coding tutorials and sharing them on KZbin.

[@lduy848]

@@DaveGrayTeachesCode Your incredible efforts deserve a massive thank you. I can't thank you enough for all you've done

[@MOJICA7257]

Thanks! Dave 🎉🎉🎊🎊 The community appreciated your efforts!

[@DaveGrayTeachesCode]

Thank you so much for your support! 🙏🚀

[@kashmirtechtv2948]

What's that? P50?

[@raniaeljouhari9319]

Wow, I just had to drop a comment here to express my deepest gratitude to you, Dave! Your course has been an absolute game-changer for me, and the fact that you provided it for free is mind-blowing 🤠

[@DaveGrayTeachesCode]

Thank you!

[@mihaivisovan2407]

I only finished chapter 4, but I can definitely say that I've learned so much and I'm more than confident I will keep on learning until the end. These chapters are clean, fresh and very informative. Every piece of it is really helpful to get through Next.js. I salute you

[@milesrykerodazie171]

Thank you so much.I have been waiting for this compilation, so i can have a deeper understanding of Nextjs 13.Thank you so much.I appreciate you.Much respect.

[@DaveGrayTeachesCode]

You're very welcome!

[@kamaboko1]

NextJs is doing its own thing. I specifically followed your initial installation of 13.1.6. The package.json shows 13.4.4 though. For those having the same problem, delete the node_modules folder and in package.json change "next", "@next/font", "eslint-config-next" to 13.1.6. Then run npm install. This worked for me. Your milage may vary.

[@DaveGrayTeachesCode]

After you create the project, you must then run npm i next@13.1.6

[@zoltaanone1146]

Im upto chapter 6 and already feel so confident in using nextJs, this is the best next js course, thank you so much for this. 3:20:00

[@suvrajitmondal2325]

I doubt this course. Is he teach us version 13.4.0 ? Especially app routing.

[@talhabytheway]

@@suvrajitmondal2325 he taught app directory yes

[@kiddhkane]

I already considered myself a "somewhat good" Next developer. But I watched your course out of curiosity and to fill in the gaps. I still managed to learn quite a few tricks. Thank you.

[@antoniors]

If anyone has a problem with the generateStaticParams() function, what worked for me was to actually provide the params property and then inside of it put the new object with the userId prop equalling the string version of the user id.

[@soothingsoundsofnature100]

I have watched almost all your videos. I like it that you make one to understand. You teach how to fish rather than just giving out the fish

[@santoshmitra3934]

I always come back to your channel. For anything that I need help with. If in any case, sadly, your channel doesn't have what I am looking for, then I look for other content creators/instructors. 🙂

[@DanielCharles-yi7gd]

Thank you Dave Gray for all your free courses, because of you I am gradually becoming a fullstack developer from a beginner

[@DaveGrayTeachesCode]

Great to hear!

[@НатальяСемешенко-т4х]

David, I am very grateful to you for this course. It is very easy for me to understand your clear fluent speech (I am not a native English speaker), that is very impotant for me, and I really like how you can simply explain complex things. Right now I needed to urgently learn nextjs. And I immediately went to your channel to look for if you have anything about it. I'm blown away by this course! You are a very good teacher

[@ochpochmak1]

Thats illegal... to be free! Wow, I really happy about people, like you, still exist! Thx from Russia P.S: I really want to support you on Patreon, but I'm Russian & my card is blocked to use to pay on patreon

[@thimerlanmatyakubov8940]

THANKS BRO!) PLS DONT DELETE THIS VIDEO!!!!!!!!!!!!!!!

[@DaveGrayTeachesCode]

Let's go with Dave - not Dad 😆.. You're welcome!

[@thimerlanmatyakubov8940]

@@DaveGrayTeachesCode hahaha sure Dave

[@RedXtremeHacker]

For a second I thought you are his son/ daughter

[@dev-qq2vy]

Love your comment, beautiful life.

[@hackerboy_bd]

😍😍😍

[@Kholturaev06]

A few days ago I've started watching these video series, and here is all videos in one. Great Job, thank you, Dave

[@DaveGrayTeachesCode]

You're welcome!

[@ofwoodfalegnameria1107]

Well, I think I can't add glorious words about your teachings. All of them was writed in the comments below, but man, this course is insane. Amazing. The step by step was the only that clear most of my doubts. Tanks a lot Mr.Gray

[@DaveGrayTeachesCode]

You're welcome!

[@nicooow869]

I get a job as a software developer and i been aplying some knowledge learned from you... thanks.

[@DaveGrayTeachesCode]

Glad to help!

[@Ffcg214]

Thank you for your service! With your course I will learn what next.js is and This also improves my English skills. 🔥

[@YasierAnsari]

Cant emphasize enough on how helpful this video is, thank you so much for such a quality video

[@DaveGrayTeachesCode]

Glad to hear that - thank you!

[@henriwang8603]

This is such a wonderful video! When I do any frontend coding right now, I have a mentor on my mind, and my nextjs code speaks the accent of yours, hhhh

[@azaanibrahimmohamed2846]

You have helped me a lot with things like node js react js and this course. Thank you very much from Somalia

[@RishabhSinghCodes]

Thank you for this amazing course, I completed this fully coding alongside. Learnt a lot. Moving on to next 'next' videos in the playlist.

[@Cookies-cv3nd]

I'm still at my first half hour, but id love to tell you, as a Scrimba student, im taking your course cause Scrimba still didn't make Next.js course, but you are an amazing teacher, and im sad that you aren't with the Scrimba Team, if your course were more interactive, that would've been so much better. But honestly thank you so much for this amazing course, you're one of the best !!!

[@venkat4237]

Bro I also love scrimba course I learned react and reactrouter in scrimba next js is this area is best to strdy next js

[@evangelinemmayie6116]

Wooohooo! 💃 FINALLY God bless you Dave!

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@francisnjugunaldc]

I Like watching the full video, without playlists, thanks DAve

[@DaveGrayTeachesCode]

You're welcome!

[@seyitylmaz192]

I can really say that KZbinr has the best narration for me on KZbin. I hope this kind of training videos will never end. Whatever I learned, I learned from you, thank you

[@DaveGrayTeachesCode]

I'm glad it has helped!

[@derelicts9503]

Jesus Christ Dave thank you :D I was planning to start on Next JS 13 tommorow and was wondering if there is any comprehensive tutorial and this comes along :D Thank you SO MUCH man!

[@DaveGrayTeachesCode]

Right on time! 🚀

[@ihubstudio6129]

I'm starting this tutorial today...I hope it will be better than others...

[@arhampersonal]

Your incredible efforts deserve a massive thank you. I can't thank you enough for all you've done. ❤❤❤

[@DaveGrayTeachesCode]

You're very welcome!

[@justinclark8673]

Mr. Gray, Thank you so much for this course. I went through it twice for completeness. Once as a primer and a second time as a full code along. Since, I have started to tackle my first large scale App for deployment in my portfolio fully with some much gained confidence from the examples you provided. I have been making good progress and I owe a lot of it to your well paced and consistently informative teaching style. You are a gem on this site. I wish I had found your content earlier in my journey.

[@DaveGrayTeachesCode]

Thank you so much for the kind words. I'm glad I have helped you!

[@kennettemaddela5682]

I consider you as one of my best software development mentors. Thank you for everything!

[@DaveGrayTeachesCode]

You're very welcome! And thank you!

[@PedroTechnologies]

Nice Job Dave!

[@DaveGrayTeachesCode]

Thank you, Pedro! 🚀

[@sergheic31]

Thanks Dave for the great video!. I like how you explain things, that is very easy to understand! To better see the "Loading" state of the page just use Throttling option in Network tab of your browser.

[@warisshaikh9474]

HatsOFF Sir, Love from Pakistan, This is THE course I'm recommending to all my friends trying to learn nextjs.

[@flavkoda4368]

I'm lucky im able to stumble upon this video early. THANKS!

[@stevenoketch6950]

There is no denying the dedication you invest in these tutorials, you deserve a coffee Dave!!!

[@DaveGrayTeachesCode]

Thank you!

[@SharmaTushar1-yt]

The delete request works completely fine as of nextJs version 13.4.12

[@SharmaTushar1-yt]

Talking about the one in chapter 8

[@DaveGrayTeachesCode]

Glad to hear that is finally resolved. It took them longer than I thought it would.

[@johnnydoe6696]

As of 09/20/23, there is an error with rehype-highlight if you are following this code exactly: "Module not found: Package path ./lib is not exported from package..." To fix this, install the other packages separately, and run "npm install rehype-highlight@6.0.0" (the version used in the video is 6.0.0, and will work. The current version at the time of writing is 7.0.0). This is relevant at about 6:16:20 onwards. Hope this helps anyone following the tutorial in the future.

[@ashvinbondada2128]

7.0.0 is now working and 6.0.0 will now give an type error. So the tutorial works as it is.

[@yeabsramesfin34]

You did it man! you completed the series. Thank you. Now time to start cooking!

[@DaveGrayTeachesCode]

You're welcome!

[@ssmb2330]

thank you professor first complete video on KZbin about next.js

[@DaveGrayTeachesCode]

You're welcome!

[@khalilbenmeziane8836]

best teacher in the world thanks from algeria i learned a lot from you

[@DaveGrayTeachesCode]

You're welcome and hello 👋 to Algeria!

[@west-la-coding]

Here after the TypeScript tut, definitely worth learning for this one! Thanks Dave!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@saurabh75prakash]

The best Nextjs tutorial on youtube 🙏

[@TuanLe-co1gy]

Hey bro! I really appreciate what you share here. Everything is free and of good quality. Instead of spending tens of dollars for courses outside, here bro is doing it for free. I appreciate what you share and hope you will continue to grow!

[@harshvardhanh7833]

just wanted to ask that is there authentication taught in this course like next-auth??

[@JayTechWorld]

@DaveGrayTeachesCode is always doing good by giving relevant and free tutorials. I'm glad to be a subscriber. Your content are helping me alot. Thanks for all you do.

[@DaveGrayTeachesCode]

You're very welcome. Glad I could help!

[@ghulammujtaba9236]

This is what I was waiting for. Time to binge learn.

[@DaveGrayTeachesCode]

Let's go! 💯

[@mrkhan7599]

I'm so happy to see your Nextjs13 course. I learned a lot from your RTK Query course. Thanks a lot for creating this gem!

[@shotoiyo]

Hey professori, please consider adding static and dynamic metadatas, also metadatas cannot be used if we use "use client" . Add authentication and authorization. Form validation using formik and yup. Adding Ui libraries like MUI. Also SEO tips for nextjs. Adding rtk to nextjs 13.4 and above. Testing nextjs websites for performance and security. Anyways, thank you professori! . And please tell me. If my website doesnot need seo but will be completely client side, should I bother using nextjs or should I use vanilla react with it?

[@DaveGrayTeachesCode]

Static and dynamic metadata are discussed and shown in this course. I do not use them in client components. I appreciate your other requests - thank you. Your requests go beyond what I considered the fundamentals for a beginners course and also required other libraries / dependencies. As I mention at the end of this course, I will continue to add more Next.js content to my playlist. Thank you again for the requests! 🚀

[@sahilverma_dev]

Seems like you know what I want. Thanks for this

[@DaveGrayTeachesCode]

You're welcome!

[@niallmoore8240]

This is gold. I am impressed at how clear and detailed this is and also very appreciative.

[@DaveGrayTeachesCode]

Thank you!

[@dannlaurte9058]

Thanks for this! Can you make a tutorial of the new Server Actions next?

[@DaveGrayTeachesCode]

Yes, definitely on my list. They are in Alpha right now so they could still change.

[@mcmehdi8782]

i didnt watch the course yet but i want to thank u for posting such a long video for free it bust take alot of effort u are really helping alot of people im very gretafull ty

[@nested9301]

the best nextjs Course on youtube ! congrats!

[@DaveGrayTeachesCode]

Thank you!

[@nested9301]

@@DaveGrayTeachesCode ihave a suggestion for the next video if u can combine nextjs with a state management library since it's confusing sometimes !

[@rodolforaquion166]

This is the new version I've been waiting for since you modify the last tutorial because of the NextJS docs update. Will surely finish this one! Thank you, Dave!

[@DaveGrayTeachesCode]

You're welcome - this is the compilation of the 12 video series. I explain the range it covers in the introduction.

[@HyperXD_YT]

The videos you make are crystal clear, love from IN

[@Tester-tv7zz]

I am planning to start learning nextjs and I am sure your course will be the best thank you so much

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@romaind4853]

Thank you for your work Dave, you help me a lot !

[@DaveGrayTeachesCode]

Glad to help!

[@தினேஷ்-சேலம்]

Love from India Thanks for this Guru ji ❤

[@DaveGrayTeachesCode]

You're welcome and hello 👋 to India!

[@shannonbrookshire234]

Your tutorials are the best by far. I love your content.

[@oreip_]

Great course Dave, I'm learning a lot. Just finished Chapter 10 using NextJS 14. Looking at the method for on demand revalidation on the docs now and what you show in the video, it seems things have changed. You either have to use Server Actions or Route Handlers. How you would do on-demand revalidation since the getSortedPosts function doesn't use fetch. Would we have to execute the getSortedPosts function inside of a GET route handler? Otherwise, I think the only method of revalidating would be the time-based revalidating using revalidate export we added to the home route page.

[@QuangNguyenJI]

Awesome, this is what i was looking for 🔥 Thanks a lot Dave 🎉

[@DaveGrayTeachesCode]

You're welcome!

[@Beast80K]

Respected Sir, Thank you for providing such a high quality, educational content for free.

[@DaveGrayTeachesCode]

You're very welcome!

[@Beast80K]

Respected Sir, First of all *Thank you*. For making highly detailed videos on various topics, you have always made videos that gave me a complete & in depth view of a concept/library etc. There's a question that I have, if possible please answer. As we are working with an external API, *What to do if, external API is down means how to show maintenance page?* Let's take a scenario, currently external API is working, after few seconds it stopped working. Hence, literally all pages will just give error msgs. Instead of this I would prefer to show a maintenance page. Some APIs also provide a ping/status endpoint, by using that what can be done?

[@adnanamin3666]

Thanks, uncle Dave! ❤ Been waiting for this one 🎉

[@DaveGrayTeachesCode]

You're welcome!

[@omarjab]

wow, just came at the right time, thank you very much. i've been trying to learn next js for a long time but i always felt lost because of the changes they make in every update

[@DaveGrayTeachesCode]

You're welcome!

[@okbaalla8451]

Dave you're just a legend, I will continue the playlist as I return from exams directly, just wanna ask if this is the same playlist of next you did (the playlist and you just joined videos) or there's some edits in, thanks ❤

[@DaveGrayTeachesCode]

Thank you! Yes, this is a compilation of the Next.js series videos. I did add some new insight and annotations, but not a huge amount.

[@juwonemmanuel3438]

This just came the right time I need it. Thanks Dave

[@DaveGrayTeachesCode]

Glad to hear that! You're welcome!

[@edunjobiemmanuel4200]

Wow! thanks for this Dave. It's come at the right time. PS: Do you have any tutorial for SQL too? Kindly share me the link if yes

[@DaveGrayTeachesCode]

You're welcome! I do have SQL. Just search for Dave Gray SQL.

[@edunjobiemmanuel4200]

@@DaveGrayTeachesCode Alright, thanks..

[@memduhcevik]

Thanks for the "full" nextjs tutorial. Great tuto, sir

[@michaeljosephasprec]

Thank you so much, I love how you teach the manner and the phase. Thank you so much for this I've been waiting for a latest Nextjs tutorial I bet this is going to be one of the best! God bless you sir!

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@ICTBase]

Thanks Instructor.🥰

[@DaveGrayTeachesCode]

Welcome!

[@monarchofaether]

You have the perfect voice for a wrestling commentary

[@DaveGrayTeachesCode]

Wrestling? 😆 I have not had anyone say that before!

[@GregPeters1]

Thanks Dave! Appreciate all your courses!

[@DaveGrayTeachesCode]

You're welcome!

[@jaybells100]

Hey Dave, love your courses!. Thank you so much! Just wanted to point out, the resources link in the description is to your typescript course repo, not the nextJS one.

[@DaveGrayTeachesCode]

Oof! Going to fix that now! Thank you!

[@codewithjom]

Thank you so much I REALLY NEED THIS!

[@DaveGrayTeachesCode]

You're welcome!

[@realsoftgames7174]

Thanks its useful info, I can't wait to go through the other videos and see the breakdown especially islly for tailwind

[@faritx5213]

this is what i was looking for, thank you ❤

[@DaveGrayTeachesCode]

You're welcome!

[@7doors847]

Amazing course Dave! 🔥

[@DaveGrayTeachesCode]

Thank you!

[@holus-bolus]

Thanks Dave, your course is the best!

[@63montywilliams50]

outstanding content, couldn't ask for a more comprehensive review. Subscribed and looking forward to more

[@dmitrysvetlov6001]

best channel, pls make a nest js course. thanks for your work.

[@SharmaTushar1-yt]

Yes, nest js please. Also, zustand if possible. Both are amazing and super popular rn. I worked a little bit with nest js but there's still so much I don't know about nest js.

[@mdmofazzalhossain77]

This is just Awesome. Why KZbin did not suggested me your video in the first place...

[@DaveGrayTeachesCode]

Right? Thank you!

[@ArturoBolívar-j2f]

I just finished your nextjs marathon tutorial. As a JS and frontend rookie I could follow along the way thanks to your step-by-step and thorough walkthrough and tips, it is so pragmatic and gentle at the same time that I was able to glance through the technical prerequisites and fill in the gaps intuitively. I really appreciate that thanks to this I'm already rocking it, progressively :D! And.. btw I still don't get really why you used Object.values() to map each object in chapter 5 (on the [searchTerm]/page.tsx file). I mean, is that a trick for enforcing an array-like object to be a pure array and secure the map and related utility methods... or??

[@NordicSnack]

I'm just now about to start this video, so I haven't seen the exact scenario you're referring to but you hit the nail on the head. That's exactly what the benefit of doing this is, along with the simple fact that in terms of performance, it's faster to iterate the object this way than it is to go through and iterate the keys.

[@learner8084]

Thanks for the video.. I'm starting out with Next and find this very useful to me. Would like to know, with NextJS, would I still need NX ? What's the benefit of using NX with NextJS ? Thanks again !

[@haipengwu2649]

I’m waiting for this course for so long

[@DaveGrayTeachesCode]

Right on!

[@omeatai]

Thank you Dave! You are my bootcamp!

[@ayushjain7023]

Great that you compiled them all, but I was expecting it to come after you add server actions video 😅

[@DaveGrayTeachesCode]

Those are currently in alpha. Plenty of time left to cover them as they may still have changes.

[@ayushjain7023]

❤️❤️

[@TechFirdous]

Great Tutorial Love from India

[@DaveGrayTeachesCode]

Thank you and hello 👋 to India!

[@kevinhong6746]

My total respect is for you. Thank you, thank you and thank you!!!!!

[@DaveGrayTeachesCode]

Thank you and you're welcome!

[@hungnguyencanh5089]

I am very excited to complete this course. Thank you so much!

[@DaveGrayTeachesCode]

You're welcome!

[@SuperPompey77]

Brilliant! Thankyou. I learned so much from this tutorial. You explain everything so well.

[@DaveGrayTeachesCode]

You're very welcome!

[@SharmaTushar1-yt]

1:41:00 gives me error cannot read property of undefined. I believe it won't work coz we're returning undefined for the user and then later accessing it using user.name so that's undefined.name. Hence, for me the fix was changing it to {undefined} or just {} basically anything but undefined. I wonder why it worked for you. Might be possible that the reason that I'm giving is wrong? Correct me please in that case.

[@sweekruthkm557]

thanks bruhh you saved my time

[@akifakif6031]

Thank you Dave. This tutorial is priceless.

[@DaveGrayTeachesCode]

You're very welcome!

[@chiragpatil2038]

Thanks for the NextJs tutorial and tutorial is great. If possible can you also make small tutorial on monorepo with Turborepo.

[@codeknight1645]

@DaveGrayTeachesCode You are great master. With pleasant voice whatever you teach i catch it immediately. You are really great sir. There is no one like you in youtube. I also follow mosh hamedani but you are great in comparision. But don't give this teaching free. You should sell your course from you own website. people should buy this type of content.

[@DaveGrayTeachesCode]

Thank you for the kind words! I do plan to make a premium course later this year.

[@tanaht23]

Hello World ! Thank you > Dave.

[@DaveGrayTeachesCode]

You're welcome!

[@Elyuli-f3c]

Excellent video teacher, you are the best. But as I have seen your Node course, I thought that in the 'Middlewares' section you would do something similar: credentials,errorHandler,verifyJWT,verifyRoles. I already saw your NextAuth video, if you could do a complete tutorial with nextAuth including the whole strategy with a DB. Thank you very much in advance.