Ultimate Next.js Course 2024 Edition

29h 39m 9s
English
Paid

Course description

Learn to build a fully functional web application using React and Next.js. This course covers topics like authentication, ORM, creating responsive UIs, integrating Stripe for payment processing, and more. You'll learn to create elegant and functional applications using modern technologies like Algolia, Framer Motion, and React Hook Form. By the end of the course, you'll be able to confidently develop complex applications and enhance user experience. The course also includes practical projects and real-world examples to help you master the skills in demand in the job market.

Read more about the course

Tech stack:

  • Next.js 14,2
  • Next-Auth V5
  • Drizzle ORM
  • Postgresql
  • Zustand
  • Algolia
  • Framer Motion
  • NeonDB
  • Resend
  • React Hook Form
  • Shad/CN
  • Stripe Elements

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online Ultimate Next.js Course 2024 Edition

0:00
/
#1: 1. Project Introduction

All Course Lessons (131)

#Lesson TitleDurationAccess
1
1. Project Introduction Demo
09:07
2
2.Setting Up Node
03:12
3
3.Project Structure
05:58
4
4.Routing
05:21
5
5.Layout
05:19
6
6.Page Component
10:01
7
7.Route Groups
01:45
8
8.Parallel Routes
03:17
9
9.Loading Page
01:21
10
10.Error Page
01:22
11
11.Route Handlers
02:09
12
12.Middleware
02:49
13
1. Caching
07:15
14
2.Setting up NeonDB with Drizzle
04:42
15
3. Schemas and Migrations
07:01
16
4.Server Actions
06:33
17
5.Mutating and Revalidating
05:30
18
6.Progressively Enhanced Forms
04:03
19
1. Tailwind Intro
08:26
20
2. Tailwind Config and extensions
03:10
21
3.Layers and components
02:31
22
4.Adding shadcn to our project
06:19
23
1.Which Auth Solution To Use?
04:44
24
2. Next-Auth V5
07:33
25
3.Setting Up Google and Github Providers
04:57
26
4. Save Users With Drizzle Adapter to your DB
07:31
27
5.Creating Our Navbar
08:57
28
6. Sign In Button
04:43
29
7.Login Page
18:11
30
8.Styling Our Login Page
10:33
31
9. React-Hook-Form + Zod Part 1
11:11
32
10. React-Hook-Form + Zod Part 2
12:13
33
11.Creating Our Sign In Action
07:21
34
12.Form Error and Success Components
08:59
35
13.Creating Our Register Page
12:25
36
14.Register Action
12:33
37
15.Email Token Drizzle Schema
05:01
38
16.Generate Verification Tokens
14:02
39
17.Resend
15:17
40
18. Confirm Users Email Address
13:21
41
19. Login Authorize
14:41
42
20.Password Reset Form
19:48
43
21.Finishing Up Password Resets + HTTP and Websockets
22:53
44
22. User Dropdown Menu
19:09
45
23. Theme Your App
18:50
46
24. User Preferences
29:06
47
25. JTW and Session Callbacks
10:26
48
26. Update User Preferences
14:36
49
27. Two Factor Tokens
30:40
50
28. Setting up UploadThing
16:06
51
1. Animations with Framer Motion
25:20
52
2. Create Product Form
19:45
53
3. Drizzle Product Schema
03:42
54
4. Integrating TipTap Rich Text Editor
19:54
55
5. Create/Edit Product Server Action
09:58
56
6. Sonner Notifications
08:29
57
7. Setting Up Tanstack Table
20:00
58
8. Edit and Delete Products
13:15
59
9. Finishing our Server Actions
13:48
60
10. Filtering and Pagination
11:08
61
11. Drizzle One/Many Relations
11:51
62
12. Product Variant Wrapper
15:18
63
13. Server Component Shananigans
04:44
64
14. Variant Form
14:19
65
15 Input Tags
18:44
66
16. Variant Images with Uploadthing
34:48
67
17.Variant Actions
21:53
68
18.Deleting Variants
05:19
69
19.Indexing With Algolia
14:34
70
20. Shifting Layout Fix
02:21
71
21. Bad State Call Fix
01:50
72
1. Displaying our products
17:21
73
2. Adding our products
03:51
74
3. URL Routing with Product Picker
27:19
75
4. Shad/CN Carousel
17:33
76
5. Review Form
19:38
77
6. User Review Action
13:35
78
7. New Drizzle Kit Config
04:42
79
8. Star System
19:47
80
9. Review Chart
16:51
81
10. Zustand
16:41
82
11. Add To Cart
16:05
83
12. Remove From Cart
14:36
84
13.Price Animation and Local Storage Persist
25:21
85
14.Cart Progress
17:24
86
15.Order Table
04:53
87
16.Stripe Elements
35:22
88
17.Creating Orders
17:07
89
18.Order Confirmation Page
09:23
90
19.Order Details Dialog
24:00
91
20.Quality Of Life Improvements
15:28
92
21. Stripe CLI and Webhooks
17:41
93
22. Analytics Page
24:10
94
23. Recharts
36:39
95
24. Cart Progress Animation
11:57
96
25. Algolia Search
25:36
97
26. Tag System
15:16
98
Deployment
20:31
99
1. Getting Started
00:37
100
2. Setting up Next with Tailwind
06:02
101
3. Prisma Schemas
15:35
102
4. Next Auth With Prisma
21:39
103
5. Creating A Stripe Customer
15:52
104
6. Creating our Navbar
23:17
105
7. Fetching Stripe Products
16:32
106
8. Formatting Prices
10:11
107
9. Styling our home page
09:51
108
10. Product Description Page
23:01
109
11. State Managment With Zustand
16:18
110
12. Adding Products to Cart
26:40
111
13. Cart UI
09:58
112
14. Adding and Removing Products
12:11
113
15. Empty Carts
04:45
114
16. Adding Google Fonts
06:03
115
17. Total Price Format
04:04
116
18. Framer Motion
16:10
117
19. Keeping It Mobile Friendly
03:35
118
20. Getting Started with Stripe
17:11
119
21. Stripe Order Data
26:57
120
22. Saving orders
32:49
121
23. Rendering Stripe Form
30:34
122
24. Success Page
28:37
123
25. Stripe Webhooks
26:47
124
26. Dashboard Page
30:20
125
27. More Dashboard Styling
06:58
126
26. Lottie Animations
11:10
127
27. Daisy UI
17:22
128
28. Adding a dropdown
10:02
129
29. Dark Light Mode
18:05
130
30. Stripe Darkmode
13:15
131
31. Adding Different Fonts
03:56

Unlock unlimited learning

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

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Build and Deploy a SaaS AI Agent Platform

Build and Deploy a SaaS AI Agent Platform

Sources: Code With Antonio
In this video course, you will create a video call application with AI support from scratch. You will learn how to set up real-time video communication...
13 hours 24 minutes 14 seconds
Build an LMS Platform

Build an LMS Platform

Sources: Code With Antonio
In this 10-hour course, you will learn how to create your own LMS (Learning Management System) platform from scratch. We will use modern technologies...
10 hours 41 minutes 23 seconds
Next40. Master Next.js 14 in 40 days of epic projects

Next40. Master Next.js 14 in 40 days of epic projects

Sources: Reed Barger, nextjs40.com
Become a Next.js pro in the best way - by building tons of amazing apps, from admin dashboards, personal websites, full-stack apps and more.
4 hours 52 minutes 49 seconds
React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advanced

Sources: udemy
React with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an
8 hours 40 minutes 51 seconds