Skip to main content
CF

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.

About the Author: Pedro Henrique Machado

Pedro Henrique Machado thumbnail
An experienced full-stack web developer and instructor, specializing in React and the JavaScript ecosystem. He runs a YouTube channel (Pedrotechnologies), publishes articles, and offers programming courses.

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

Related courses

Frequently asked questions

What are the prerequisites for this Next.js course?
This course is designed for beginners, so there are no strict prerequisites. However, having a basic understanding of JavaScript and web development concepts will be beneficial. The course starts with setting up NodeJS and a code editor, which are essential tools for developing with Next.js.
What projects will I build during the course?
You will start by building small apps like a Notes App to understand core concepts. As your skills grow, you'll develop a larger event planner application. This project will demonstrate how early design choices can affect the application's speed and scalability.
Who is the target audience for this course?
The course is targeted at beginners who want to learn Next.js from scratch. It is also suitable for developers with a basic understanding of JavaScript who wish to deepen their skills in building server-rendered React applications using Next.js.
How does this course compare in depth and scope to other Next.js courses?
Unlike many courses that dive into complex examples early on, this course focuses on foundational skills before moving on to more challenging projects. It covers 115 lessons that include topics like Server and Client Components, dynamic routing, API routes, and form handling using React Hook Form.
What specific tools or platforms will I learn to use?
You will learn to use the App Router, Server and Client Components, and Tailwind for styling. The course also covers form handling with React Hook Form, authentication with AuthJS, and deploying applications while considering SEO and performance.
What topics are not covered in this course?
While the course covers a broad range of Next.js features, it does not delve into advanced topics such as custom server configurations, internationalization, or integrating with third-party APIs beyond basic use cases.
How much time will I need to complete the course?
The course consists of 115 lessons. The time commitment will vary based on your prior experience and the pace at which you study. However, given the detailed nature of the course, expect to invest several weeks to fully grasp and practice the concepts presented.