CourseFlix

Next Level NextJS for Beginners

20h 13m 11s
English
Paid

Learn Next.js from scratch with clear steps and steady progress. You see how each part works, why it works, and how to use it to build real projects.

How the Course Works

You start with the core ideas behind the App Router. You move through each tool one piece at a time. You build simple apps first so you can focus on clear skills, not guesswork.

Many guides jump into hard examples too fast. This often leads to broken projects and code you copy without knowing why it works. Here, you follow a path that helps you grow with each step.

Server and Client Components

You learn how Server and Client Components fit together. You learn when to use each one and why it matters. You practice data fetching, caching rules, and API routes with real tasks.

Projects You Build

You start with small apps, like a Notes App. These apps teach core ideas in a clear way. Then you build a larger event planner that shows how early design choices shape speed and growth later.

What You Will Know

  • use the App Router, layouts, and dynamic routes with confidence;
  • build with Server and Client Components without guessing;
  • work with forms using Server Actions and React Hook Form;
  • deploy apps with a basic grasp of SEO and performance.

Build Strong Habits

You learn how to plan, build, and improve apps with a clear process. You stop hunting for random fixes and start making solid choices on your own.

Watch Online 115 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 115 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What is this Course?
All Course Lessons (115)
#Lesson TitleDurationAccess
1
What is this Course? Demo
00:55
2
How to Learn This Course
00:45
3
What is NextJS and Why You Should Learn It
00:59
4
Installing NodeJS
02:16
5
Code Editor and Extensions
01:11
6
Setup A NextJS Project
05:33
7
How a NextJS CodeBase Looks Like
07:43
8
Creating Our First Routes
06:56
9
Navigating Routes
02:16
10
Layouts
05:15
11
Nested Routes
06:07
12
Dynamic Routes
08:00
13
Route Groups
02:31
14
What are Server Components?
09:17
15
What are Client Components?
05:42
16
Why NextJS Has Server Components By Default
02:29
17
Project Intro
01:29
18
Home and NotFound Page
04:15
19
Creating Input Form
04:15
20
Creating Notes Context
04:00
21
Creating Notes Provider
07:45
22
Displaying List of Notes
08:06
23
Adding A Note
03:38
24
Displaying All Notes
07:38
25
Creating Individual Note Page
09:28
26
Creating a Form
05:46
27
Creating a Server Action
05:54
28
Getting Data using useActionState
08:26
29
Using a form pending state
06:32
30
Intro to API Routes
08:42
31
Caching in NextJS: Cache Components
08:59
32
Time Based Revalidation
03:20
33
Force Revalidation using revalidatePath
09:39
34
Force Revalidation using Tags
07:48
35
Refreshing Uncached Data
02:49
36
SSR vs CSR vs ISR
07:28
37
Setup Tailwind in NextJS
04:13
38
Colors in Tailwind
05:31
39
Margins and Paddings
05:25
40
Typography
04:36
41
Layouts and Flex
07:20
42
Responsive Grids
09:29
43
Radius, Shadows, and Hovers
11:10
44
Dark and Light Mode
12:41
45
Custom Colors
03:18
46
Tailwind Layers
05:38
47
What we Are Building
03:06
48
Project Setup and Navbar
17:43
49
Login Page
15:42
50
Setup User Database Tables
14:51
51
Setup Authentication with AuthJS
20:08
52
Add Logout Functionality
04:49
53
Create Event Schema
08:21
54
Create New Event Page
22:26
55
Add Events to the Table
25:14
56
Events Page
29:40
57
Filtering Events
20:16
58
Event Actions
31:38
59
Setting Up RSVP
18:51
60
Adding RSVP actons
25:16
61
List of Attendees
09:50
62
Dashboard Page
18:27
63
Dashboard Page Data
14:51
64
Adding a Not Found Page
03:28
65
Deploying the Website
20:49
66
Loading Routes
06:58
67
Error Routes
06:59
68
Unauthorized and Forbidden Functions
06:24
69
Parallel Routing
12:39
70
Catch All Routes
03:00
71
What is this Module?
01:50
72
Direct DB Query vs Api Routes
10:27
73
Metadata and SEO
10:53
74
Intro To The Project
03:05
75
Setting Up Better Auth
10:31
76
Sign Up and Sign In
11:24
77
Authorization
08:28
78
Middleware Vs Page Redirects and Sessions
08:26
79
Accessing Auth in the Client
07:05
80
Authentication with Google and Github
11:56
81
Email Verification with Resend
10:46
82
Demo
06:01
83
Setup Project
04:41
84
Making the Sign Up Page
18:18
85
Setting up Authentication
23:13
86
Setting up OAuth with Google
09:22
87
Building the Sidebar
36:00
88
Tweet Table
15:59
89
Displaying Tweets
21:29
90
Tweet Composer
16:06
91
Saving Tweets to the DB
07:51
92
Image Uploads
17:56
93
Add Uploaded Images On Tweets
04:33
94
Tweet Replies
23:34
95
Displaying Replies
06:50
96
Adding Likes
17:29
97
Adding Retweets
07:00
98
Fetch Profile Data
10:22
99
Profile Header
17:24
100
Edit Profile UI
19:44
101
Edit Profile Data
16:02
102
Profile Tabs
15:31
103
Profile Content
13:10
104
Follow User Functionality
22:28
105
Create Notifications
17:54
106
Display Notifications
20:03
107
Notifications Badge
10:12
108
Mark Notifications as Read
05:40
109
Loading States
07:34
110
Improving Performance With DB Indexes
10:02
111
Adding Caching
13:15
112
Infinite Paginated Tweet Feed
32:52
113
RLS Policies, Bugs, and more
11:04
114
MetaData and SEO
03:10
115
Deploying the Website
10:52
Unlock unlimited learning

Get instant access to all 114 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

115 lessons · 20h 13m 11s
Show all 115 lessons
  1. 1 What is this Course? 00:55
  2. 2 How to Learn This Course 00:45
  3. 3 What is NextJS and Why You Should Learn It 00:59
  4. 4 Installing NodeJS 02:16
  5. 5 Code Editor and Extensions 01:11
  6. 6 Setup A NextJS Project 05:33
  7. 7 How a NextJS CodeBase Looks Like 07:43
  8. 8 Creating Our First Routes 06:56
  9. 9 Navigating Routes 02:16
  10. 10 Layouts 05:15
  11. 11 Nested Routes 06:07
  12. 12 Dynamic Routes 08:00
  13. 13 Route Groups 02:31
  14. 14 What are Server Components? 09:17
  15. 15 What are Client Components? 05:42
  16. 16 Why NextJS Has Server Components By Default 02:29
  17. 17 Project Intro 01:29
  18. 18 Home and NotFound Page 04:15
  19. 19 Creating Input Form 04:15
  20. 20 Creating Notes Context 04:00
  21. 21 Creating Notes Provider 07:45
  22. 22 Displaying List of Notes 08:06
  23. 23 Adding A Note 03:38
  24. 24 Displaying All Notes 07:38
  25. 25 Creating Individual Note Page 09:28
  26. 26 Creating a Form 05:46
  27. 27 Creating a Server Action 05:54
  28. 28 Getting Data using useActionState 08:26
  29. 29 Using a form pending state 06:32
  30. 30 Intro to API Routes 08:42
  31. 31 Caching in NextJS: Cache Components 08:59
  32. 32 Time Based Revalidation 03:20
  33. 33 Force Revalidation using revalidatePath 09:39
  34. 34 Force Revalidation using Tags 07:48
  35. 35 Refreshing Uncached Data 02:49
  36. 36 SSR vs CSR vs ISR 07:28
  37. 37 Setup Tailwind in NextJS 04:13
  38. 38 Colors in Tailwind 05:31
  39. 39 Margins and Paddings 05:25
  40. 40 Typography 04:36
  41. 41 Layouts and Flex 07:20
  42. 42 Responsive Grids 09:29
  43. 43 Radius, Shadows, and Hovers 11:10
  44. 44 Dark and Light Mode 12:41
  45. 45 Custom Colors 03:18
  46. 46 Tailwind Layers 05:38
  47. 47 What we Are Building 03:06
  48. 48 Project Setup and Navbar 17:43
  49. 49 Login Page 15:42
  50. 50 Setup User Database Tables 14:51
  51. 51 Setup Authentication with AuthJS 20:08
  52. 52 Add Logout Functionality 04:49
  53. 53 Create Event Schema 08:21
  54. 54 Create New Event Page 22:26
  55. 55 Add Events to the Table 25:14
  56. 56 Events Page 29:40
  57. 57 Filtering Events 20:16
  58. 58 Event Actions 31:38
  59. 59 Setting Up RSVP 18:51
  60. 60 Adding RSVP actons 25:16
  61. 61 List of Attendees 09:50
  62. 62 Dashboard Page 18:27
  63. 63 Dashboard Page Data 14:51
  64. 64 Adding a Not Found Page 03:28
  65. 65 Deploying the Website 20:49
  66. 66 Loading Routes 06:58
  67. 67 Error Routes 06:59
  68. 68 Unauthorized and Forbidden Functions 06:24
  69. 69 Parallel Routing 12:39
  70. 70 Catch All Routes 03:00
  71. 71 What is this Module? 01:50
  72. 72 Direct DB Query vs Api Routes 10:27
  73. 73 Metadata and SEO 10:53
  74. 74 Intro To The Project 03:05
  75. 75 Setting Up Better Auth 10:31
  76. 76 Sign Up and Sign In 11:24
  77. 77 Authorization 08:28
  78. 78 Middleware Vs Page Redirects and Sessions 08:26
  79. 79 Accessing Auth in the Client 07:05
  80. 80 Authentication with Google and Github 11:56
  81. 81 Email Verification with Resend 10:46
  82. 82 Demo 06:01
  83. 83 Setup Project 04:41
  84. 84 Making the Sign Up Page 18:18
  85. 85 Setting up Authentication 23:13
  86. 86 Setting up OAuth with Google 09:22
  87. 87 Building the Sidebar 36:00
  88. 88 Tweet Table 15:59
  89. 89 Displaying Tweets 21:29
  90. 90 Tweet Composer 16:06
  91. 91 Saving Tweets to the DB 07:51
  92. 92 Image Uploads 17:56
  93. 93 Add Uploaded Images On Tweets 04:33
  94. 94 Tweet Replies 23:34
  95. 95 Displaying Replies 06:50
  96. 96 Adding Likes 17:29
  97. 97 Adding Retweets 07:00
  98. 98 Fetch Profile Data 10:22
  99. 99 Profile Header 17:24
  100. 100 Edit Profile UI 19:44
  101. 101 Edit Profile Data 16:02
  102. 102 Profile Tabs 15:31
  103. 103 Profile Content 13:10
  104. 104 Follow User Functionality 22:28
  105. 105 Create Notifications 17:54
  106. 106 Display Notifications 20:03
  107. 107 Notifications Badge 10:12
  108. 108 Mark Notifications as Read 05:40
  109. 109 Loading States 07:34
  110. 110 Improving Performance With DB Indexes 10:02
  111. 111 Adding Caching 13:15
  112. 112 Infinite Paginated Tweet Feed 32:52
  113. 113 RLS Policies, Bugs, and more 11:04
  114. 114 MetaData and SEO 03:10
  115. 115 Deploying the Website 10:52

Related courses

Frequently asked questions

What is Next Level NextJS for Beginners about?
Learn Next.js from scratch with clear steps and steady progress. You see how each part works, why it works, and how to use it to build real projects. How the Course Works You start with the core ideas behind the App Router. You move…
Who teaches Next Level NextJS for Beginners?
Next Level NextJS for Beginners is published by an independent instructor on CourseFlix. The catalog page lists the course alongside related material in the same topic.
How long is Next Level NextJS for Beginners?
Next Level NextJS for Beginners contains 115 lessons with a total runtime of 20 hours 13 minutes. All lessons are available to watch online at your own pace.
Is Next Level NextJS for Beginners free to watch?
Next Level NextJS for Beginners is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Next Level NextJS for Beginners online?
Next Level NextJS for Beginners is available to watch online on CourseFlix at https://courseflix.net/course/next-level-nextjs-for-beginners. The page hosts every lesson with the integrated video player; no download is required.