CF

Ultimate Next.js Course 2024 Edition

29h 39m 9s
English
Paid

Ultimate Next.js Course 2024 Edition is a 131-lesson 29 hours 39 minutes self-paced course by Dev Ed. Master the art of building dynamic and efficient web applications using React and Next.

Course facts

Lessons
131
Duration
29 hours 39 minutes
Level
All levels
Language
English
Updated
Instructor
Dev Ed
Price
Premium

Master the art of building dynamic and efficient web applications using React and Next.js with our comprehensive course. Dive into essential topics such as authentication, ORM integration, and creating responsive user interfaces. You will also learn to incorporate advanced technologies like Stripe for seamless payment processing. By leveraging tools like Algolia, Framer Motion, and React Hook Form, you will be equipped to craft visually appealing and user-friendly applications. Concluding this course, you will confidently develop sophisticated web apps, enhance user experience, and stay competitive in the job market with practical projects and real-world scenarios.

Course Overview

This course provides an in-depth exploration of the following key components and libraries to ensure you gain industry-relevant skills:

Build Modern Applications

Understand the processes and techniques for creating responsive and functional user interfaces that cater to diverse needs and devices.

Authenticate Users

Implement robust authentication strategies with Next-Auth to secure your applications efficiently.

Database Management with Drizzle ORM and PostgreSQL

Learn to handle data interactions and schema management with Drizzle ORM and PostgreSQL, ensuring a reliable backend system for your applications.

Optimized State Management using Zustand

Delve into Zustand for simplified and predictable state management in your React applications.

Advanced Features

  • Payment Integration: Seamless integration with Stripe Elements for secure payment processing.
  • Search Functionality: Utilize Algolia to deliver fast and relevant search results.
  • Animation and Motion: Enhance user experience with Framer Motion for interactive animations.
  • Forms Handling: Streamline user input and validation with React Hook Form.

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

Who teaches Ultimate Next.js Course 2024 Edition? Dev Ed

Dev Ed thumbnail

Dev Ed (developedbyed.com) is the personal teaching platform of Edwin Diaz, the creator of the popular DevEd YouTube channel. He is best known for short, high-energy front-end and JavaScript tutorials with a strong creative / animation slant — the videos sit at the intersection of practical web development and the visual side of CSS, Canvas, and WebGL.

His CourseFlix listing follows the same pattern: The Ultimate JavaScript Animation Course, The Creative React and Redux Course, The Creative Javascript Course, and Ultimate Next.js Course 2024 Edition. Material is paid, aimed at intermediate front-end developers who want to push beyond standard CRUD interfaces into the more visual / animated end of the web.

What lessons are included in Ultimate Next.js Course 2024 Edition?

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

What courses are similar to Ultimate Next.js Course 2024 Edition?

Frequently asked questions

What prerequisites are required for this course?
The course assumes a familiarity with JavaScript and React. It is beneficial to have prior experience with web development concepts such as routing and state management, as the lessons quickly delve into advanced topics like Zustand for state management and integration of Next-Auth for authentication.
What projects will I build during the course?
Throughout the course, you will work on building a dynamic web application that incorporates advanced features. Key projects include setting up authentication with Next-Auth, database management with Drizzle ORM and PostgreSQL, and implementing payment processing using Stripe. The course also covers creating responsive user interfaces with tools like Tailwind CSS and animations using Framer Motion.
Who is the target audience for this course?
The course is designed for web developers who are looking to deepen their understanding of Next.js and build sophisticated, full-stack applications. It is particularly suitable for those interested in mastering modern web development tools and frameworks, including those who aim to enhance their skills in authentication, state management, and database handling.
How does the depth of this course compare to other Next.js courses?
This course offers an extensive exploration of Next.js, focusing not just on the basics but also on advanced topics such as authentication, state management with Zustand, and payment integrations with Stripe. With 131 lessons, it provides a comprehensive look at building modern applications, making it more detailed than many introductory courses available.
What specific tools and libraries will I learn to use?
The course covers a variety of tools and libraries essential for modern web development. You will use Next-Auth for authentication, Drizzle ORM with PostgreSQL for database management, Zustand for state management, and integrate Stripe for payment processing. Additionally, you will work with Tailwind CSS for styling, Framer Motion for animations, and React Hook Form for form handling.
What topics are not covered in this course?
While the course is comprehensive, it does not cover topics outside the scope of Next.js and its ecosystem. For instance, it does not delve into server-side languages like Python or PHP, nor does it cover non-React frameworks such as Angular or Vue.js. The focus remains on mastering Next.js and its associated tools for full-stack web development.
How much time should I expect to commit to this course?
The course consists of 131 lessons, each designed to build upon the previous one. Although the total runtime is not specified, students should plan to dedicate several weeks to fully engage with the material, complete practical projects, and participate in real-world scenario exercises. The time commitment will vary based on prior experience and the pace at which you work through the lessons.