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

----------

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

----------

• Follow @maxedapps and @academind_real on Twitter

See you in the videos!

----------

[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

[luis_soul]

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 🙌🏼

[degraphe]

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

[renujadecosta]

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

[dev.regotube]

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

[lazyboiiii]

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

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

[abenjamin]

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 👍

[imranabdalla]

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

[curtism]

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.

[michaelnewman]

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!

[orassayag]

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

[sonihardik]

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.

[vladislavamarkova]

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!

[muhammadadnan]

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.

[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! ;)

[ThatBigGuyAl]

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

[goldmikanik]

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

[SyWill]

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.