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!!!
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! ;)
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.
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 (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)
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
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 🎉
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.
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.
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.
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
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.
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!
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.
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!
An hour in to find out that the source code isn't there and is needed to follow along. There are links for source code but it's not the source code for this tutorial. It's misleading to say "from scratch" and "100% Free" when it's neither.
You can try getting the project from the Download ZIP button instead of cloning it. The version that you get after extracting matched with the one he used.
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
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.
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!
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!
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.
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.
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.
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?
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
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
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
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 !
YESSS!!! I watched the full react tutorial, now time to watch this!
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 🙌🏼
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! ;)
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🤔
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
Are you reading my mind 🥺
I was about to start e-commerce project using NEXT.js.
Great timing.
I’ve bought so many of Max’s Udemy courses. He’s the best teacher.
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 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!!!!
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.
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!
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
Wow, amazing.
I have been watching tutorials for the past two years, nobody come close to yours, what an amazing tutorial
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.
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
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 👍
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.
I have taken many courses from you on Udemy. You're an amazing teacher and coder. Thanks for this free course!
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.
"Success is not key to Happiness
Happiness is the key to Success "
So always be happy and keep smiling😍😍
1:32:50 - Page Re-Rendering
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.
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
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.
Teaching is an art and you are a great artist !!!
Thank you very much!
Probably the most concise nextjs tut on RUclips. Very clearly stated at a good pace and the exercises were fun to try. Thank you!
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
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.
the best Next JS tutorial by far congratulations you beat The Net Ninja at this one :)
That initial introduction that what is Next & why Next is very essential. Thanks for a thorough tutorial mate 💖.
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!
Wow, the best quick course that I have ever seen. You are on my top 2 learning channels
Perfect step-by-step next.js tutorial. Thanks for the sharing.
Wow this is so clear and understandable! Your pronunciation is superb for non-native English speakers. Thanks a lot
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.
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!
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!
An hour in to find out that the source code isn't there and is needed to follow along. There are links for source code but it's not the source code for this tutorial. It's misleading to say "from scratch" and "100% Free" when it's neither.
Hey Max The starting code for the BIG project is the wrong git hub repo. Was loving the first hour but couldn't start the big project.
You can try getting the project from the Download ZIP button instead of cloning it. The version that you get after extracting matched with the one he used.
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
I love this man ! He has taught me a lot of things , which no school ever taught me !
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.
You are incredible, best video on RUclips about NextJS. Master! You have a new subscriber now. Thank you.
As usual so passionate in sharing his knowledge to the world.Keep going Max
Thanks, will do!
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 👍
This is wonderful Max! A crash course with details. Thanks for 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!
best programming teacher ever
Wow, fantastisches Tutorial! Sehr gut erklärt und viele wichtige Details. Danke.
Where is the link for the first project? those project links provided had the same blog project already made
this is by far the best Next.js tutorial out there! Thanks a lot for your great content!
I couldn't get main project starting code from github what you show in this video, dont know which branch i need to clone to my local repo
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.
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.
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.
Im just starting to watch this video, but i can already tell that I will learn so much from this! Thank you so much!
I love the way you explain step by step. I learned a lot. Thank you very much.
Yipeeeee Max is back with another vid!
Was never gone, last video was released a week ago :D
@@academind Max, in the last vid I commented this only, and you replied the same! We won't repeat this again! (•‿•)
Next js has bunch of new features then react. And it also deserves that popularity!
Thanks for this! Awesome content. Maximilian knows a lot and teaches it very well
Thank you Max for providing such deep yet easy to understand course 🙏
GOAT Teacher Maximilian schwarzmuller !👌
What branch to checkout when starting the real project?
Man this guy is damn genius. Love your courses max, your a real good programmer.
If u ever forget how does clicking on see details leads to dynamic page, watch 1:13:16 (programmatic navigation)
This was a great crash course! So thorough and well thought out.
Best tutorial for getting started with Next.js.
Thanks a lot.
Max is the best teacher! Thank you
I think; you have a got gifted Taleent to mastering in new techs.. thnk you.
i actually didn't know react prior to this video. I have been examining or googling stuff as video goes by haha
OMG！This is the best NextJs tutorial that i've ever seen on RUclips!Thank you bro!
Nuxt.js next! 🙏
God bless you Max!
Thank you so much Max. You're the real deal
Thank you for teaching me Next.js, Max. God bless you. ✨
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?
Awesome tutorial/course! Thank you so much for creating this!
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 very much Max for this well explained tutorial! You are the best one!
After following along with this tutorial i'm now thankful that i'm using typescript. great video by the way.
I love the way he explains. As a result, I am subscribing
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
Nice tutorial! Keep moving in this direction, guys!
I just purchased the your Next.js course 2 days back and now you have made it available for free😂😂.
I'm not sure who you are but you have a gift. Awesome tutorial.
Thank you so much. this is a great tutorial. I have learned a lot.
Thanks a lot for such valuable course content for free. As always, I look up to your courses for anything in JavaScript.
You have great teaching skills: very informative content, explained delightfully. Thank you very much Max!
I was about to start learning Next.js. I found this great video. Thank you, Max. :)
This is such an amazing course, thank you so much for sharing this.
Best Course available for Next JS ..Thank you very much Max :)
Such a amazingly detailed course. Great thanks!
I think you should teach us the advanced and difficult parts of NextJS next!
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
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
Mine too, when I clone it, it looks different and is actually the complete project
Had the same problem when I cloned the project. Fixed it by downloading the project as a zip file.
Same. Anyone found the correct starting code?
@@headlikeahole6548 Where did you find a zip file with the meetup start code please?
Thank you so much for explaining about NextJs crash course for beginners in such a simple and beautiful way.