Next.js Crash Course for Beginners - Learn NextJS from Scratch in this 100% Free Tutorial!
Vložit
- čas přidán 27. 07. 2024
- Learn all about Next.js, React's most popular Production Framework! Get Started with NextJS and make build amazing websites with ReactJS even more fun! Full Project included, 100% free 3 hours long course!
Join the full Next.js course: acad.link/nextjs
Exclusive discount also available for our bestselling React.js course: acad.link/reactjs
Join our Academind Community on Discord: academind.com/community
First Starting Project Code: github.com/mschwarzmueller/ne...
Main Project Starting Code: github.com/mschwarzmueller/ne...
Check out all our other courses: academind.com/courses
----------
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
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
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 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 🙌🏼
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 👍
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
YESSS!!! I watched the full react tutorial, now time to watch this!
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!
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.
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.
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!
Amazing course, I already did it within the full course of React. Keep uploading AMAZING content!
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 !
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.
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!
I have never found a youtube tutorial that was helpful before. This guy actually thought about his audience and it shows. Thanks broski
Wow, amazing.
I have been watching tutorials for the past two years, nobody come close to yours, what an amazing tutorial
That initial introduction that what is Next & why Next is very essential. Thanks for a thorough tutorial mate 💖.
This was a great crash course! So thorough and well thought out.
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.
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 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🤔
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.
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.
Perfect step-by-step next.js tutorial. Thanks for the sharing.
Are you reading my mind 🥺
I was about to start e-commerce project using NEXT.js.
Great timing.
OMG！This is the best NextJs tutorial that i've ever seen on CZcams!Thank you bro!
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. :)
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.
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.
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.
I love this man ! He has taught me a lot of things , which no school ever taught me !
Im just starting to watch this video, but i can already tell that I will learn so much from this! Thank you so much!
Very detailed and well explained tutorial with so much content offered.. Thank you very much..I am very grateful.
the best Next JS tutorial by far congratulations you beat The Net Ninja at this one :)
this is by far the best Next.js tutorial out there! Thanks a lot for your great content!
Wow, the best quick course that I have ever seen. You are on my top 2 learning channels
I love the way you explain step by step. I learned a lot. Thank you very much.
I’ve bought so many of Max’s Udemy courses. He’s the best teacher.
I love the way he explains. As a result, I am subscribing
Great base course as Max's style! Thanks for sharing!
Wow this is so clear and understandable! Your pronunciation is superb for non-native English speakers. Thanks a lot
I have taken many courses from you on Udemy. You're an amazing teacher and coder. Thanks for this free course!
Incredible course with good depth. Strongly recommended
1:32:50 - Page Re-Rendering
Such a amazingly detailed course. Great thanks!
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.
God bless you Max!
Best tutorial for getting started with Next.js.
Thanks a lot.
This is wonderful Max! A crash course with details. Thanks for sharing.
Awesome tutorial/course! Thank you so much for creating this!
Wow, fantastisches Tutorial! Sehr gut erklärt und viele wichtige Details. Danke.
Thanks for this! Awesome content. Maximilian knows a lot and teaches it very well
You are incredible, best video on CZcams about NextJS. Master! You have a new subscriber now. Thank 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
This is such an amazing course, thank you so much for sharing this.
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
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.
Thanks Max. Great detail as usual!
I was waiting for it ! ♥
Hello sir ! it's a such a good tutorial for beginner and I really thanks to you make it simple for everyone and your explanation was really awesome , thanks once again keep it up.
Thank you very much Max for this well explained tutorial! You are the best one!
Simply Amazing loved the way of explanation.
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
Thank you so much for explaining about NextJs crash course for beginners in such a simple and beautiful way.
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.
Max is the best teacher! Thank you
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!
Best Course! Thank you, man.
Thank you Max for providing such deep yet easy to understand course 🙏
Thanks a lot for such valuable course content for free. As always, I look up to your courses for anything in JavaScript.
Best Course available for Next JS ..Thank you very much Max :)
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.
As usual so passionate in sharing his knowledge to the world.Keep going Max
Thanks, will do!
Your udemy courses are fantastic. I’m currently working on next js and react 👍
I Just finished! Def buying your course!! after i get more free time! Thank you!!
I just purchased the your Next.js course 2 days back and now you have made it available for free😂😂.
thank you man I learn many thing from this course ♥
Wow max it feels like the child project of the svelte and mern paid courses you have. Love your work 💕💕
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.
Amazing tutorial! Subscribed.
Amazing tutorial!!!! I learned so much through this tutorial.
Man this guy is damn genius. Love your courses max, your a real good programmer.
Awesome content, bro! Thank you so much
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 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
Million thanks for this video!!!
I understood very clearly!
Thanks a lot!!!!!!!!
Great tutorial. Thanks Max!
For those who are here for NextJS, skip to 1:26:51. Really helpful video 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.
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.....
Thank you for teaching me Next.js, Max. God bless you. ✨
I'm not sure who you are but you have a gift. Awesome tutorial.
great video thanks for this - when is part 2 coming out?
Thank you so much. this is a great tutorial. I have learned a lot.
Great course! Thank you very much :)
Max thanks for the awesome tutorial!
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.