Introduction to Next.js and React

0:00 – Introduction
0:29 – Requirements
2:24 – Package Managers
4:45 – Running Locally
6:33 – Fast Refresh
6:57 – Routers
7:57 – React
8:44 – JSX
10:14 – Components
11:15 – Props
12:25 – Composing
14:08 – Imports and Exports
15:36 – External Components
17:05 – Create Next App
19:09 – Directory Overview
21:57 – Layouts and Pages
26:36 – Routing
27:43 – Dynamic Routes
28:36 – next/link
30:34 – Reading Route Parameters
31:48 – Nested Layouts
33:51 – Installing Postgres
35:15 – Async Components (Data Fetching)
40:53 – Suspense + Caching
43:58 – Styling
48:16 – Quiz Pages
51:01 – Database Schema
51:49 – Displaying Quiz Answers
54:29 – Displaying Correct Answer (Server Action)
1:01:44 – Creating New Quizzes (Forms)
1:14:40 – Revalidating Data
1:17:04 – Deploying to Vercel
1:20:21 – Conclusion

Here are some additional resources:

[_ash]

I would say this could probably be the best intro to Next.js on YT. Bc this is coming from someone who really knows how Next is built on top of the React library!

[kevinjhammond]

Dude I just paused at 12 and a half minutes to comment on how thankful I am to find this video. It is the explanation I have been searching for as someone who is trying to understand this tech stack. Thank you so much!

[huuphongsan]

After 3 years, I just want to say thank you Next.js and Vercel for changing my life.

[Wheeelie]

I just got the pop up notification that you released this video. Immediately, I clicked on it with a “this is too good to be true”, and yet, Lee, here we are. Thank you! Let’s go.

[heyjitendra]

Good to see this course Lee. I started learning React because of your course only. You are awesome :)

[gvenkatakrishnan]

Excellent. Thanks Lee. Please do this kind of video from time to time

[ayoolafakoya]

Excellent tutorial.
Really enjoyed the clear explanations and demonstrations.
I'd love to see more content from you, especially diving into intermediate to advanced topics.
It would be immensely helpful if you could provide examples of real-world applications to accelerate our understanding and application of these concepts. Looking forward to the next video. 👍

[cusematt]

You did a really phenomenal job with this. Like legitimately you cleared up 10+ things I was still totally confused about after having watched probably over 1000 YT vids on web dev. And they were not even the main topic of your video. Salud.

[SuperWhite]

Any chance of a tutorial/guide on how you set up your Postgres DB?

[saadowain]

Thanks Lee. So many concepts in a short tutorial time.

[bulelaniponer]

Awesome intro Lee, very refreshing from the ground-up explanation. Keep up the awesome work as always 🥷

[jatinlodhi]

Lee please make few more videos like this, this is amazing small project and explanation

[imAskja]

Lee, your videos always help me tremendously. This one is no exception. Thank you!

[gurjotsinghpandher]

Excellent -- covered everything so nicely... best video ever!!!

[leanamaro]

Excellent tutorial! thank you very much! it helped me in the transition from pages router and postgrade.

[Grolliiitjk]

Holy moly, a big thanks for this tutorial! I currently have a fairly large website with around 3, 000 daily visitors that was built by a freelancer. However, I want to learn how to manage it on my own so that I can add new features and updates. I'm going to grab a cup of coffee and watch this now. thanks again!

[sahaneakanayaka]

Love this one, everything is crystal clear 😍😍🙏👌

[KristianTheDesigner]

I started learning Next.js last tuesday (I know React quite well from before). I have done one very small project on my own in my own way, now i will do this and learn the "correct" way 🤓 30min in and it is really great and i can tell already that i feel more comfy with Next.

[sayanmanna]

hey man, this is really an awesome intro!!!

[theintjengineer]

That url redirect with the query parameter `?show=true` was slick haha