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

[@vivaldyXX2]

Learning Next.js from this video in 2025. It’s surprising how many small changes have happened in such a short time! But it’s still possible to follow along - just be prepared to solve small issues. For example, dynamic params are now promises that need to be resolved before reading them. Everything works fine in dev, but problems start during the build. The author is so good as a teacher that after just a couple of hours, you can pause the video and start writing code, predicting the next lesson or module. This says a lot about him as a tutor. It’s not just about copying the instructor’s steps, he really helps you understand the power of Next.js and the benefits of server-side generation. These 7 hours of video turned into a week of learning for me in the evenings, taking notes and experimenting. I can’t imagine how much time the instructor spent preparing all this. Huge respect… The new generation of IT professionals owes a lot to you!

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

[@yasharkhatib641]

@@SanthoshKumar-sh5pf next js is javascript framework that built in top of node js and react(that react also is javascript framework that worked with node js)..so everything is node js and javascript , css and html....you should first know about javascript and node js then css and html after all you can choose what do you want to do...frontend developing with CSR approach (react) or backend (node js frameworks like nest , express or php like laravel if you dont need event-driven) or full-stack with SSR and CSR approaches together then next js is excellent choice or if you want pure SSR approach and SEO is important than speed for you then your choice can be python django framework...i hope its can be helpful for you

[@MOJICA7257]

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

[@DaveGrayTeachesCode]

Thank you so much for your support! 🙏🚀

[@kashmirtechtv2948]

What's that? P50?

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

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

[@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!

[@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!

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

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

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

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

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

[@НатальяСемешенко-т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

[@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!

[@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]

😍😍😍

[@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! 🚀

[@PedroTechnologies]

Nice Job Dave!

[@DaveGrayTeachesCode]

Thank you, Pedro! 🚀

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

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

[@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!

[@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!

[@nicooow869]

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

[@DaveGrayTeachesCode]

Glad to help!

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

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

[@ghulammujtaba9236]

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

[@DaveGrayTeachesCode]

Let's go! 💯

[@ihubstudio6129]

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

[@warisshaikh9474]

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

[@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!

[@kennettemaddela5682]

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

[@DaveGrayTeachesCode]

You're very welcome! And thank you!

[@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!

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

[@evangelinemmayie6116]

Wooohooo! 💃 FINALLY God bless you Dave!

[@DaveGrayTeachesCode]

Thank you for the kind words!

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

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

[@khalilbenmeziane8836]

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

[@DaveGrayTeachesCode]

You're welcome and hello 👋 to Algeria!

[@azaanibrahimmohamed2846]

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

[@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!

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

[@stevenoketch6950]

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

[@DaveGrayTeachesCode]

Thank you!

[@yeabsramesfin34]

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

[@DaveGrayTeachesCode]

You're welcome!

[@francisnjugunaldc]

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

[@DaveGrayTeachesCode]

You're welcome!

[@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!

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

[@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!

[@niallmoore8240]

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

[@DaveGrayTeachesCode]

Thank you!

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

[@romaind4853]

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

[@DaveGrayTeachesCode]

Glad to help!

[@ssmb2330]

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

[@DaveGrayTeachesCode]

You're welcome!

[@flavkoda4368]

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

[@saurabh75prakash]

The best Nextjs tutorial on youtube 🙏

[@Beast80K]

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

[@DaveGrayTeachesCode]

You're very welcome!

[@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 !

[@west-la-coding]

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

[@DaveGrayTeachesCode]

Glad it was helpful!

[@shannonbrookshire234]

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

[@63montywilliams50]

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

[@memduhcevik]

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

[@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!

[@Ffcg214]

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

[@aqibali6008]

hey @Dave Gray i have a question so i should watch this video completely then jump into nextJs upper versions or i just cover basics till 2:25:13 then learn nextJs 14 and goes on and in last i create that blog project ?

[@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! 🙏

[@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!

[@juwonemmanuel3438]

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

[@DaveGrayTeachesCode]

Glad to hear that! You're welcome!

[@sahilverma_dev]

Seems like you know what I want. Thanks for this

[@DaveGrayTeachesCode]

You're welcome!

[@faritx5213]

this is what i was looking for, thank you ❤

[@DaveGrayTeachesCode]

You're welcome!

[@QuangNguyenJI]

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

[@DaveGrayTeachesCode]

You're welcome!

[@HyperXD_YT]

The videos you make are crystal clear, love from IN

[@adnanamin3666]

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

[@DaveGrayTeachesCode]

You're welcome!

[@GregPeters1]

Thanks Dave! Appreciate all your courses!

[@DaveGrayTeachesCode]

You're welcome!

[@7doors847]

Amazing course Dave! 🔥

[@DaveGrayTeachesCode]

Thank you!

[@holus-bolus]

Thanks Dave, your course is the best!

[@김민기-f9s]

This is best for beginner :) I think this video is really good; I recommended it to people around me.

[@nature_is_a_god]

Love from India Thanks for this Guru ji ❤

[@DaveGrayTeachesCode]

You're welcome and hello 👋 to India!

[@Yuvalspiegel]

Thanks!

[@DaveGrayTeachesCode]

Thank you for the support!

[@SuperPompey77]

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

[@DaveGrayTeachesCode]

You're very welcome!

[@monarchofaether]

You have the perfect voice for a wrestling commentary

[@DaveGrayTeachesCode]

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

[@hungnguyencanh5089]

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

[@DaveGrayTeachesCode]

You're welcome!

[@modernNeanderthal800]

I work on a frontend Vue application in an AEM environment. This is mind-blowingly easier to maintain and adjust. Thank you for the spoon-fed lessons. What stellar content, a perfect 5/7, 100% recommend.

[@codewithjom]

Thank you so much I REALLY NEED THIS!

[@DaveGrayTeachesCode]

You're welcome!

[@akifakif6031]

Thank you Dave. This tutorial is priceless.

[@DaveGrayTeachesCode]

You're very 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.

[@realsoftgames7174]

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

[@soko-den]

Dave, you're really great master, my best wishes in all your endeavours. Greetings from Ukraine.

[@DaveGrayTeachesCode]

Thank you for the kind words and hello 👋 to Ukraine!

[@haipengwu2649]

I’m waiting for this course for so long

[@DaveGrayTeachesCode]

Right on!

[@rahulkulkarni9653]

This is awesome thanks dave you are fabulous. Appreciate your efforts love from India 🇮🇳

[@DaveGrayTeachesCode]

So nice of you

[@omeatai]

Thank you Dave! You are my bootcamp!

[@timlmit]

You are amazing teacher Dave!

[@DaveGrayTeachesCode]

Thank you!

[@mdmofazzalhossain77]

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

[@DaveGrayTeachesCode]

Right? Thank you!

[@mmanolimits4688]

In 1:00:17, Currently I'm using Next version 13.4.12, I don't see any pre fetch request when hover mouse to link. May I ask Why ?

[@philliam111]

if you click and hold does it fetch?

[@mmanolimits4688]

@@philliam111 No, It's doesn't do anything, I think maybe cause I'm using 13.4.12 version

[@ichiroutakashima4503]

Was clearly waiting for this. Really appreciate it. I know vite exists, but my current company is looking for Next for production builds. I really love your React Tutorial, I learned a lot from it.

[@DaveGrayTeachesCode]

Glad to hear that!

[@sauravpathak31]

1:14:41 we’re returning multiple articles from one component.. isn’t react just allowing only one parent tag.. how can we return multiple components? @DaveGrayTeachesCode

[@kevinhong6746]

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

[@DaveGrayTeachesCode]

Thank you and you're welcome!

[@SharmaTushar1-yt]

Also, at 1:39:40 it the return is necessary. I tried without it and it just gives the default next js 404 but when I use return it gives the expected custom not-found.tsx

[@joe82]

Always learn a lot from you. Thanks Dave for the great work!❤

[@DaveGrayTeachesCode]

Glad to hear that and you're welcome!

[@aboronilov]

You are a born tutor. Awesome tutorial

[@TechFirdous]

Great Tutorial Love from India

[@DaveGrayTeachesCode]

Thank you and hello 👋 to India!

[@zackbana]

Thank you for your wonderful videos. Just wished that I had started on this sooner. I have a quick question. At 1:00:17, you moused over and it initiated the pre-fetch. When I tried to do this, there was no prefetch in the developer tools. I am using chrome and mac. What could be the possible reason?

[@-theghost-9381]

This is the best Next js course