Next.js Crash Course for Beginners - Learn NextJS from Scratch in this 100% Free Tutorial!

[@academind]

Timestamps: Welcome 00:00 What is NextJS? 00:46 Key Feature: Server-side (Pre-) Rendering of Pages 05:31 Key Feature: File-based Routing 12:09 Key Feature: Build Fullstack Apps With Ease 15:22 Creating a NextJS Project & IDE Setup 17:12 Analyzing the Created Project 22:52 Adding First Pages To The Project 25:44 Adding Nested Pages / Paths 31:50 Creating Dynamic Pages 35:37 Extracting Dynamic Route Data 39:13 Linking Between Pages 43:21 Onwards To A Bigger Project! 50:34 Preparing Our Project Pages 54:07 Rendering A List Of (Dummy) Meetups 57:49 Adding A Form For Adding Meetups 01:02:52 The "_app.js" File & Wrapper Components 01:06:47 Programmatic Navigation 01:13:04 Adding Custom Components & Styling With CSS 01:16:51 Modules How NextJS Page Pre-Rendering Actually Works 01:26:51 Introducing Data Fetching For Page Generation (getStaticProps) 01:32:43 More Static Site Generation (SSG) With getStaticProps 01:41:39 Exploring getServerSideProps 01:47:23 Working With Dynamic Path Params In getStaticProps 01:53:50 Dynamic Pages & getStaticProps & getStaticPaths 01:59:04 Introducing API Routes 02:06:21 Connecting & Querying a MongoDB Database 02:12:41 Sending HTTP Requests To API Routes 02:22:13 Getting Data From The Database (For Page Pre-Rendering) 02:29:02 Getting Meetup Detail Data & Paths 02:36:12 Adding "head" Metadata To Pages 02:45:53 Deploying NextJS Projects 02:55:12 Working With Fallback Pages & Re-Deploying 03:07:38 Summary 03:11:52

[@jaya_surya]

@Academind Please Consider adding applaud button to your videos

[@otho01]

For some reason, the code in your "Main Project Starting Code" repo is not what you show in the video, but code for a blog of yours. Where can I find the code you're working with in the tutorial? And thanks a lot for the great next.js course!

[@freddycool68]

True, It seems that the link no longer points to correct repo. Without base code for this project, understanding API Routes and next topics in this tutorial, just got way harder :/

[@WiziwigeAgario]

Hi

[@mdegginger4761]

@@otho01 after you git clone the repo down to your local machine. try git checkout 9c9e9f1 that should put you on the right branch to follow along with the video

[@omkathe3599]

Good to see Prince Harry coding...

[@techtrash9138]

Epic 😂

[@kevinderawy481]

🤣🤣🤣🤣🤣 I'm laughing my ass of bruh

[@ashkanghk1467]

Lmfao I’m dying 😭😭😭😭😭🤣🤣🤣🤣

[@digitalx788]

he need to learn to code as he left home

[@2minuteschool929]

Harys clone code camp, just kidding🤔

[@degraphe8824]

I remember asking max for this course in 2019. He said he didn't have plans for it then. Now he does it.. thank you so much. I've literally been waiting 2 years... I appreciate everything you do and have done for me. God bless you!!!

[@academind]

Thank you! We can't promise certain courses but as you see we note your requests and try to cover as much as possible :)

[@daveraj1958]

What font max uses in this course? Like mono or consolas

[@影片程式]

@@academind Can you make a series of course about Next.Js for 2022 ? Your course is really helpful, Max !

[@lazyboiiii9386]

For those who are here for NextJS, skip to 1:26:51. Really helpful video Max!!!!

[@pinkeye00]

1:32:50 - Page Re-Rendering

[@dev.regotube]

YESSS!!! I watched the full react tutorial, now time to watch this!

[@ThatBigGuyAl]

I’ve bought so many of Max’s Udemy courses. He’s the best teacher.

[@renujadecosta6408]

I've bought this course...it was a COMPLETE COURSE..amazing teaching style..awesome..he's broken down the content really beautifully..very well structured..amazing projects.. awesome..thanks a lot Macmillan

[@goldmikanik8274]

Wow, amazing. I have been watching tutorials for the past two years, nobody come close to yours, what an amazing tutorial

[@SuperMaDBrothers]

I have never found a youtube tutorial that was helpful before. This guy actually thought about his audience and it shows. Thanks broski

[@luis_soul1]

I was waiting for this course for so long! Max is the only one who can explain things in depth and such a clarity. Thank you so much 🙌🏼

[@malamhari_]

It's just yesterday that I thought i'm gonna buy Next.js course, and here you're uploading it for free. Thanks:D

[@danielrocha5774]

it's just the first hours, you can still buy it the whole course

[@imranabdalla5330]

Are you reading my mind 🥺 I was about to start e-commerce project using NEXT.js. Great timing.

[@aikude]

The first framework video I've seen in all my years that even mentions meta tags. Very thorough tutorial! (Speaking as an advanced Next.JS user) And thanks for helping clean up the Internet! ;)

[@IroncladDev]

Wow. This is probably one of the best youtube videos I've ever seen. By some unexplainable reason, I was completely motivated to continue watching the video and now I'm in love with nextJS!! Thank you so much for making this!! I'll be watching a lot more from you!

[@muhammadadnan1347]

I like how you explain the basic workflow at the beginning of every tutorial so we know whether it is the right thing to learn, thanks alot.

[@tadachaipanya9206]

Max is the best teacher of teaching code that I have ever known. He makes me truly understand the functions of Next.js framework. I also have bought 3 courses in Udemy, React, Node.js, and MERN, Every course is great too.

[@dianakosta57]

Maximilian you are the best mentor, Ive been following you many years and purchased many courses in Udemy

[@successhycenth]

Hello Max, thanks for this great course but i do have issues regarding to the starter template you used when building meetups lessons, i cant find it in your github link provided

[@SyWill0]

First this is yet another amazing course, I have pretty much everything you put on udemy and subscribed to several through Academind as well. Only thing that threw me was if you download the project as zip it includes the .vscode folder with settings file inside and if you open the folder it will super zoom in your editor lol. Easy enough fix remove the file/folder but just an fyi in case anyone gets spooked that your editor has decided to flip out.

[@cvanputt]

I have taken many courses from you on Udemy. You're an amazing teacher and coder. Thanks for this free course!

[@Anas_Alaqeel]

47:53 actually you cant use tag on nextJs because in production after build it, will not navigate you to anywhere, you may get page not found so you will need to use Link instead and here comes a new problem, which is "what if I want to move to another framework?" in nextJs you will be forced to change every single to tag and this is only one example. unlike create-react-app you can use tag in react router and then in production you can inject the Ngnix with some code and then you will have tag working like charm in production, and then if you decied to move to another framework or even plain HTML you could just copy the component JSX elements and use it anywhere. thats why I'm moving from nextJS to create-react-app because it has no limitations and everything you doing in NextJS you can do in creat-react-app.

[@dominikzecoli9640]

I already bought 2 maxmillian courses and they are worth every penny, even too cheap for the level of knowledge he gives you, best teacher on udemy so far!

[@GabrielMateusLima]

Max is a guy that you can always count on, he has all the courses about FE that you need, saving lives (I would say). I bought so many courses and will, you deserve the best man. Thanks 🎉

[@sam-h5r6j]

Nice try max, your courses are always outdated and you don't support them.

[@assefatedla6681]

Teaching is an art and you are a great artist !!!

[@academind]

Thank you very much!

[@codegamer5163]

Bro, I'm still at the very beginning of the video and I just can't believe that such a masterpiece is existed for free

[@honded8124]

If u ever forget how does clicking on see details leads to dynamic page, watch 1:13:16 (programmatic navigation)

[@kitebeachinnbeachinn2888]

Max (Academind), TheNetNinja (Shawn) & Brad (Traversy Media) have teaching skills beyond any other programming tutorials creators. Bucky Robets is back and used to be the best but have been replaced.(TheNewBoston)

[@R24W86]

Hey now brown cow!

[@parasmyname784]

Web dev simplified tooo

[@nickstaresinic9933]

Nailed it. (I'll add Colt Steele, too.)

[@nietzsche1991]

Stephen Grider too

[@nickstaresinic9933]

@@nietzsche1991 Yes: Thumbs-up to Stephen Grider.

[@skimonibla4987]

the best Next JS tutorial by far congratulations you beat The Net Ninja at this one :)

[@lionelguaregua820]

Wow, the best quick course that I have ever seen. You are on my top 2 learning channels

[@enzorodrigoalvarez]

You are incredible, best video on KZbin about NextJS. Master! You have a new subscriber now. Thank you.

[@sashavlondone]

Wow this is so clear and understandable! Your pronunciation is superb for non-native English speakers. Thanks a lot

[@tellmemorecommentdeleted2676]

So well done, This was exactly what I was looking for an I am ecstatic that this was the first video I clicked on. So many bogus half assed tutorials out there while this one stands apart. Worth every minute.

[@sanjay-ky4tq]

hats off the way you teach all the minor details.It is very much helpful to understand basics of any technology.And things sounds very interesting and clear.

[@InfoTrickyOfficial]

"Success is not key to Happiness Happiness is the key to Success " So always be happy and keep smiling😍😍

[@orassayag]

Amazing course, I already did it within the full course of React. Keep uploading AMAZING content!

[@curtism7302]

You ALWAYS do such a great job of explaining the What, Why, and How in every tutorial .. It's why you are one of the best out there. Thanks for providing such quality content.

[@abdulwahab-ut7kn]

Hi Max, this is one of the great next-js course tutorial that really helps me to understand through an initial level. I really appreciate your work, I like it. I request you that kindly give such course that contained the deep concept and all featured about next-js Thank You

[@shivansh901]

That initial introduction that what is Next & why Next is very essential. Thanks for a thorough tutorial mate 💖.

[@abhishekshrivastava9509]

This is wonderful Max! A crash course with details. Thanks for sharing.

[@kennethgan1333]

As usual so passionate in sharing his knowledge to the world.Keep going Max

[@academind]

Thanks, will do!

[@mil0s251]

Okay for those who may get the error on Pre-rendering part. You need to change the route to the data, so for example: "title: meetup.data.title". (add 'data')

[@emon_hoque]

Thanks! I was having trouble there and your suggestion worked!

[@ericknuque2520]

This works for me too. Thank you!

[@utibeabasiukobo4381]

Where

[@rihardstrams2393]

@@utibeabasiukobo4381 When you return props that you get from Mongo for meetups: meetups.map(meetup => ({ title: meetup.data.title, address: meetup.data.address, image: meetup.data.image, id: meetup._id.toString(), })). Use this instead of just meetup.title etc. This fixed it for me!

[@rihardstrams2393]

Thank you this fixed the problem 👍

[@JustThink2000]

Probably the most concise nextjs tut on KZbin. Very clearly stated at a good pace and the exercises were fun to try. Thank you!

[@abenjamin13]

OMG YES!!! Thank you 🙏 Max. I’m almost done with react tutorial and have been wanting to know more about next.js. I greatly appreciate this 👍

[@happyeric77]

Perfect step-by-step next.js tutorial. Thanks for the sharing.

[@Truzzell]

Wow, fantastisches Tutorial! Sehr gut erklärt und viele wichtige Details. Danke.

[@nantiyachomtee2998]

this is by far the best Next.js tutorial out there! Thanks a lot for your great content!

[@alnwolff]

AMAZING!. I needed to learn next asap, for a challenge in a job, and this tutorial was perfect for it!. You're amazing to explain!. I'll check the full next course to learn more :). Thanks!

[@davidmutua6971]

FInally from the full-blown version of the course on Udemy. I was able to understand getStaticProps(), getStaticPaths(), fallback property, getServerSideProps() properly. And when to use each.

[@majicMix911]

Holy shit, why havent I discovered Next.js until now. All the damn parts\pieces I learned individually, and Next.js has it all in 1 package, easy to use. omfg

[@tinasegura2270]

I'm not sure who you are but you have a gift. Awesome tutorial.

[@29namankumar29]

Yipeeeee Max is back with another vid!

[@academind]

Was never gone, last video was released a week ago :D

[@29namankumar29]

@@academind Max, in the last vid I commented this only, and you replied the same! We won't repeat this again! (•‿•)

[@vladislavamarkova8379]

Great course! It is really helpful and it is a pleasure for one to listen, practice and understand the key concepts! Clearly explained. Thank you!

[@jeffchen86]

OMG！This is the best NextJs tutorial that i've ever seen on KZbin!Thank you bro!

[@nursultann4281]

Max is the best teacher! Thank you

[@honded8124]

2:36:18 - Getting Meetup Detail Data & Paths

[@zaidshaikh6634]

The source code you provided and the one in the video are different. So we are not able to copy just the react part from the source code and then continue with the next js.

[@Max-we2bc]

Just a fantastic tutorial, the way you explain everything step by step is just fantastic. Thank you🙂

[@ANKITKUMAR-ih3yk]

Did you build the project from tutorial. Actually I'm facing problem in project please drop your Github whould be helpful for me.

[@sonihardik90]

Hey Max, I really appreciate and thankful for creating this tutorial. You are really to the point and your explanation is very clear to get it understand. It's really helpful to start with next.js. Many thanks for this tutorial.

[@alenthankachan9348]

I love this man ! He has taught me a lot of things , which no school ever taught me !

[@pvcuber1232]

best programming teacher ever

[@michaelnewman2993]

Building myself a blog using Next while attending bootcamp. I love React and the Next docs are very well writtent but I was still getting overwhelmed. This video clarified a lot for me, thank you!

[@kevinderawy481]

Man this guy is damn genius. Love your courses max, your a real good programmer.

[@fullstacknextjs]

I just purchased the your Next.js course 2 days back and now you have made it available for free😂😂.

[@andregomes7232]

Thanks for this! Awesome content. Maximilian knows a lot and teaches it very well

[@tejasmuthya4492]

God bless you Max!

[@nehatiwari5211]

Thank you Max for providing such deep yet easy to understand course 🙏

[@amrindraouk3440]

I love the way you explain step by step. I learned a lot. Thank you very much.

[@lakhannad]

Best tutorial for getting started with Next.js. Thanks a lot.

[@nazardzys7514]

Nice tutorial! Keep moving in this direction, guys!

[@tk_ale]

I Just finished! Def buying your course!! after i get more free time! Thank you!!

[@honded8124]

keep watching from 1:59:10 to finally understand getstaticpaths and getstaticprops

[@flinskikun]

I love the way he explains. As a result, I am subscribing

[@saravanandoraiswamy]

Thanks a lot for such valuable course content for free. As always, I look up to your courses for anything in JavaScript.

[@milagos09]

Im just starting to watch this video, but i can already tell that I will learn so much from this! Thank you so much!

[@_isaac_muniz_]

Thank you for teaching me Next.js, Max. God bless you. ✨

[@devindragautam8753]

I was about to start learning Next.js. I found this great video. Thank you, Max. :)

[@onethingidontknowy]

Best Course available for Next JS ..Thank you very much Max :)

[@ramlakshman6169]

GOAT Teacher Maximilian schwarzmuller !👌

[@willyhorizont8672]

sir can I ask question, do I need to pre render all my product in home page of my ecommerce app or just some ? I wondering many api limit the query data maybe like 100 data per query or more, but do I need to prerender them all?

[@thigarette1]

This was a great crash course! So thorough and well thought out.

[@rodrigomarsan1143]

Amazing video!!! So clear!!! I love the way you explain with a logical and well structured point of view and really in depth, so you can fully understand what is going on. Thanks for this. I will check out the full curses.

[@abarnto]

You have great teaching skills: very informative content, explained delightfully. Thank you very much Max!

[@dillonbarnes232]

Awesome tutorial/course! Thank you so much for creating this!

[@dfordemo981]

you make the most awesome free course on entire youtube, greatttttt , we love yooooo 😍😍😍😍😍😍😍💡💡💡

[@141rams]

Where is the link for the first project? those project links provided had the same blog project already made

[@sandipanborthakur8637]

Amazing tutorial!!!! I learned so much through this tutorial.

[@AneesMalikDev]

1:18:56 I have a question. How do you scroll horizontally on the browser without dragging the scroll bar with a mouse?

[@venus-sz2sl]

I was waiting for it ! ♥

[@royhyde8842]

Very detailed and well explained tutorial with so much content offered.. Thank you very much..I am very grateful.

[@reinaogo7161]

Thank you very much Max for this well explained tutorial! You are the best one!

[@lakshman587]

Million thanks for this video!!! I understood very clearly! Thanks a lot!!!!!!!!

[@io_inc]

After following along with this tutorial i'm now thankful that i'm using typescript. great video by the way.

[@otho01]

Can anyone tell me if the repo code has changed? I have cloned the "Main Project Starting Code" but it looks different than the one Max is using in the video

[@warrior-rapid]

Mine too, when I clone it, it looks different and is actually the complete project

[@headlikeahole6548]

Had the same problem when I cloned the project. Fixed it by downloading the project as a zip file.

[@revanslacey]

Same. Anyone found the correct starting code?

[@revanslacey]

@@headlikeahole6548 Where did you find a zip file with the meetup start code please?

[@chadliu6507]

Incredible course with good depth. Strongly recommended

[@dusanknezevic4028]

With next.js I think you don't need to import Fragment component from react, you can simply use the empty tag to wrap up your jsx code instead: html/jsx

[@alirezasoheilmahmoudi680]

the best explanation of next js. thanks

[@abhieshinde]

Such a amazingly detailed course. Great thanks!

[@mingong1904]

This is such an amazing course, thank you so much for sharing this.

[@ԵղիշեՀայրապետյան]

Nice course . Good job man 👌👌