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
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!
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 :/
@@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
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!!!
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
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.
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! ;)
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!
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.
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 🎉
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!
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)
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
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
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.
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
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.
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.
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!
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.
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')
@@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!
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.
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!
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
Hey Max thanks for the awesome tutorial! I think it would be cool if the next courses for Academind Pro are more based on projects that students could put in their portfolio that have a certain theme to it...like how would you build a Real Estate or Doctors office site, how would you add authentication or SEO to it; How would you create a simple editor or maybe your own CMS
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.
Thanks for the course. It will give everyone a quick start to start using it. Are you planning similar crash course on latest angular framework version? I would really appreciate of you could do.
Bookmarked this right away and will watch it as soon as I find the time. So, what's next after Next.js, Max? Nuxt with Vue 3? I for one would hope so, as watching two short, concise courses right after another would make it quite easy to compare the two biggest players on the market of server-side-rendered frontend frameworks/libraries, leading to very informed decisions about the right tech to pick for a given task.
NextNex.js is the framework for Next.js, and that Next.js is FrameWork for React.Js, and React.Js is FrameWork for JavaScript or Vanila.js. I am backend c# dev, and I am sure that all these Frameworks are to make FrontEnd developers important. hahaha
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.
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
@Academind Please Consider adding applaud button to your videos
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!
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 :/
Hi
@@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
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!!!
Thank you! We can't promise certain courses but as you see we note your requests and try to cover as much as possible :)
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 !
I have never found a youtube tutorial that was helpful before. This guy actually thought about his audience and it shows. Thanks broski
For those who are here for NextJS, skip to 1:26:51. Really helpful video Max!!!!
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.
I’ve bought so many of Max’s Udemy courses. He’s the best teacher.
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
Wow, amazing.
I have been watching tutorials for the past two years, nobody come close to yours, what an amazing tutorial
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
YESSS!!! I watched the full react tutorial, now time to watch this!
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.
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! ;)
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!
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.
Are you reading my mind 🥺
I was about to start e-commerce project using NEXT.js.
Great timing.
1:32:50 - Page Re-Rendering
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 🙌🏼
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 🎉
Nice try max, your courses are always outdated and you don't support them.
Maximilian you are the best mentor, Ive been following you many years and purchased many courses in Udemy
I have taken many courses from you on Udemy. You're an amazing teacher and coder. Thanks for this free course!
Good to see Prince Harry coding...
Epic 😂
🤣🤣🤣🤣🤣 I'm laughing my ass of bruh
Lmfao
I’m dying 😭😭😭😭😭🤣🤣🤣🤣
he need to learn to code as he left home
Harys clone code camp, just kidding🤔
It's just yesterday that I thought i'm gonna buy Next.js course, and here you're uploading it for free. Thanks:D
it's just the first hours, you can still buy it the whole course
"Success is not key to Happiness
Happiness is the key to Success "
So always be happy and keep smiling😍😍
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!
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)
Hey now brown cow!
Web dev simplified tooo
Nailed it. (I'll add Colt Steele, too.)
Stephen Grider too
@@nietzsche1991 Yes: Thumbs-up to Stephen Grider.
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
That initial introduction that what is Next & why Next is very essential. Thanks for a thorough tutorial mate 💖.
Wow this is so clear and understandable! Your pronunciation is superb for non-native English speakers. Thanks a lot
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
Wow, the best quick course that I have ever seen. You are on my top 2 learning channels
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.
the best Next JS tutorial by far congratulations you beat The Net Ninja at this one :)
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
Teaching is an art and you are a great artist !!!
Thank you very much!
Amazing course, I already did it within the full course of React. Keep uploading AMAZING content!
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.
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 👍
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.
best programming teacher ever
Perfect step-by-step next.js tutorial. Thanks for the sharing.
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!
You are incredible, best video on UA-cam about NextJS. Master! You have a new subscriber now. Thank you.
Probably the most concise nextjs tut on UA-cam. Very clearly stated at a good pace and the exercises were fun to try. Thank you!
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.
I just purchased the your Next.js course 2 days back and now you have made it available for free😂😂.
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')
Thanks! I was having trouble there and your suggestion worked!
This works for me too. Thank you!
Where
@@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!
Thank you this fixed the problem 👍
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.
As usual so passionate in sharing his knowledge to the world.Keep going Max
Thanks, will do!
I'm not sure who you are but you have a gift. Awesome tutorial.
This is wonderful Max! A crash course with details. Thanks for sharing.
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!
this is by far the best Next.js tutorial out there! Thanks a lot for your great content!
I love this man ! He has taught me a lot of things , which no school ever taught me !
Next js has bunch of new features then react. And it also deserves that popularity!
Man this guy is damn genius. Love your courses max, your a real good programmer.
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
Best tutorial for getting started with Next.js.
Thanks a lot.
Max is the best teacher! Thank you
Just a fantastic tutorial, the way you explain everything step by step is just fantastic. Thank you🙂
Did you build the project from tutorial. Actually I'm facing problem in project please drop your Github whould be helpful for me.
Thank you for teaching me Next.js, Max. God bless you. ✨
To finishing the course is like life long journey for me and you do every weeks over 3 hours course man this is unbelievable commitment thank you
I love the way you explain step by step. I learned a lot. Thank you very much.
I love the way he explains. As a result, I am subscribing
Thank you Max for providing such deep yet easy to understand course 🙏
God bless you Max!
OMG！This is the best NextJs tutorial that i've ever seen on UA-cam!Thank you bro!
I think you should teach us the advanced and difficult parts of NextJS next!
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!
Wow, fantastisches Tutorial! Sehr gut erklärt und viele wichtige Details. Danke.
Hey Max thanks for the awesome tutorial! I think it would be cool if the next courses for Academind Pro are more based on projects that students could put in their portfolio that have a certain theme to it...like how would you build a Real Estate or Doctors office site, how would you add authentication or SEO to it; How would you create a simple editor or maybe your own CMS
GOAT Teacher Maximilian schwarzmuller !👌
When the LEGENDARY MAXIMILIAN speaks, all pple MUST carefully listen! Love u bro
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.
Nice tutorial! Keep moving in this direction, guys!
After following along with this tutorial i'm now thankful that i'm using typescript. great video by the way.
I was about to start learning Next.js. I found this great video. Thank you, Max. :)
Im just starting to watch this video, but i can already tell that I will learn so much from this! Thank you so much!
Thanks for the course. It will give everyone a quick start to start using it. Are you planning similar crash course on latest angular framework version? I would really appreciate of you could do.
Nuxt.js next! 🙏
I Just finished! Def buying your course!! after i get more free time! Thank you!!
Thanks for this! Awesome content. Maximilian knows a lot and teaches it very well
Incredible course with good depth. Strongly recommended
Best Course available for Next JS ..Thank you very much Max :)
Bookmarked this right away and will watch it as soon as I find the time.
So, what's next after Next.js, Max? Nuxt with Vue 3?
I for one would hope so, as watching two short, concise courses right after another would make it quite easy to compare the two biggest players on the market of server-side-rendered frontend frameworks/libraries, leading to very informed decisions about the right tech to pick for a given task.
If u ever forget how does clicking on see details leads to dynamic page, watch 1:13:16 (programmatic navigation)
NextNex.js is the framework for Next.js, and that Next.js is FrameWork for React.Js, and React.Js is FrameWork for JavaScript or Vanila.js. I am backend c# dev, and I am sure that all these Frameworks are to make FrontEnd developers important. hahaha
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.
Thanks a lot for such valuable course content for free. As always, I look up to your courses for anything in JavaScript.
I think; you have a got gifted Taleent to mastering in new techs.. thnk you.
Thank you so much for explaining about NextJs crash course for beginners in such a simple and beautiful way.
Max coming in with the right hook
This was a great crash course! So thorough and well thought out.
Great tutorial, Seth Rogen have many talents !
you make the most awesome free course on entire youtube, greatttttt , we love yooooo 😍😍😍😍😍😍😍💡💡💡
Wow max it feels like the child project of the svelte and mern paid courses you have. Love your work 💕💕
hey max, thanks for the content! would be lovely if you show us how to use styling libraries like tailwindcss instead of writing our own styling.
Amazing Course Max, I have all your courses on Academind, and I´m very interesested on Next.Js course. But I´m just waiting for a promotion.....
You have great teaching skills: very informative content, explained delightfully. Thank you very much Max!
would love a nuxtjs crash-course and a full-scale course if you can, would pay for that
great video thanks for this - when is part 2 coming out?