CF

NextJS E-Com Masterclass: Learn The All New Next JS

19h 17m 40s
English
Paid

Welcome to the NextJS E-Com Masterclass: Learn The All New Next JS!

Ready to create your very own online store? Join us on a fun-filled journey where you'll learn to build amazing e-commerce websites from start to finish. We'll show you how to use Next.js, a supercharged version of React, along with easy-to-understand tools like TypeScript, MongoDB, Cloudinary, and Mailtrap.

Don't worry if you're new to full stack development – I'll guide you every step of the way. By the end, you'll have a full-stack skill set and the ability to craft impressive online shops. Get started now and let's bring your e-commerce dreams to life!

Why Choose Next.js?

Why Next.js, you ask? Well, it's more than just another JavaScript library – it's a dynamic framework that supercharges your React applications with server-side rendering, efficient routing, and a fantastic developer experience. With the rise of e-commerce, having a deep understanding of Next.js is a game-changer, and that's exactly what you'll gain through our hands-on approach.

Tools and Technologies You Will Master

This course is designed to make you a well-rounded developer by introducing you to a variety of essential tools and technologies:

TypeScript

TypeScript is a user-friendly programming language that enhances JavaScript by adding type safety. You'll learn how to leverage its power to improve your code's reliability and clarity.

MongoDB

Discover MongoDB, a powerful and flexible database solution that allows you to manage data with ease. You'll learn to seamlessly integrate this database into your projects, enhancing your data management skills.

Cloudinary

With Cloudinary, a cloud-based image and video management platform, you can optimize media for better performance and user experience. We'll show you how to make the most of these capabilities in your applications.

Mailtrap

Master email testing and debugging with Mailtrap, a crucial tool for delivering reliable communication to your users. You'll become proficient in managing email functionality within your e-commerce site.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 171 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Project Intro
All Course Lessons (171)
#Lesson TitleDurationAccess
1
Project Intro Demo
11:16
2
Let Me Guide You
02:01
3
Node JS
01:41
4
Mongodb
02:28
5
VS Code
01:36
6
Node JS
01:30
7
Homebrew
01:07
8
Mongodb
02:29
9
Mongodb Compass
01:04
10
12-Running Mongodb In The Background
01:34
11
VS Code
00:49
12
Open With VS Code
01:01
13
React TS Project Setup
02:15
14
Rendering App
07:50
15
Component & Props
09:51
16
Input & Change Handler
09:43
17
Project Setup
11:35
18
Layout
03:42
19
Navbar
09:02
20
Navbar Explained
08:59
21
Sign up Form
04:20
22
Form State & Validation
08:27
23
Rendering Errors
09:24
24
API Route
07:33
25
Connecting to Local Database
04:16
26
User Model
07:39
27
Creating New User
05:27
28
Hashing Password
07:10
29
Comparing Password
04:52
30
Sending Emails
05:38
31
ChatGPT & Email Verification Token
10:45
32
Generating Verification Token
05:02
33
Email Verification Page
03:37
34
Verify Token Route
08:44
35
Verifying Token
06:07
36
Rendering Notification
04:33
37
Next Auth
11:25
38
Sign in Route
09:12
39
Sign in UI
08:09
40
Auth Session
05:36
41
Auth Errors
05:56
42
Sign out
04:43
43
Guest Route
07:06
44
Customizing Session
09:28
45
Forget Password UI
02:35
46
Forget Password API Route
07:06
47
Sending Link to Email
06:12
48
Submitting Request
04:59
49
Validating Password Reset Token
08:46
50
Resetting Password
15:23
51
Production Build
05:35
52
Publishing Application
09:53
53
Refactoring Send Email
10:55
54
Sign in along with Sign up
04:42
55
Private Route
05:17
56
Fixing Auth Session Profile
11:00
57
Email Reverification
13:38
58
Admin Sidebar
07:06
59
Fixing Navbar
06:55
60
Product Table
05:32
61
Product Form
11:36
62
Product Model
07:26
63
Server Action
07:32
64
Validating Product Info
05:50
65
Using Validation Schema
05:11
66
Cloud Storage
06:28
67
Cloud Signature
03:00
68
Uploading Image
08:40
69
Creating New Product
11:51
70
About Action
05:53
71
Fetching New Products
07:46
72
Update Product Page
08:15
73
Update Product Form
09:17
74
Fixing Warning
02:03
75
Let's Understand How to update
02:43
76
Remove Image From Cloud
01:55
77
Removing Images
13:36
78
Removing Images From Cloud
08:10
79
Update Product 1
11:05
80
Update Product 2
08:47
81
Generating Dummy Product
03:20
82
Generating Multiple Dummy Products
07:35
83
Pagination
07:42
84
Fetching & Rendering Products
06:46
85
Few Little Fixes
04:18
86
Dynamic Route
05:27
87
Rendering Single Product
07:10
88
Hero Slider
07:14
89
Cart Model
05:42
90
Cart API 1
05:41
91
Cart API 2
06:42
92
Adding to Cart
10:18
93
Featured Product Model
04:20
94
Featured Product Form
05:06
95
Submitting Featured Product Form
04:54
96
Creating Featured Product
04:50
97
Featured Product Table
01:56
98
Rendering Featured Product
02:59
99
Update Featured Product 1
06:26
100
Update Featured Product 2
05:02
101
Deleting Featured Product
07:12
102
Few Little Fixes
05:44
103
Featured Product Slider
07:44
104
Responsive Slider
02:47
105
Horizontal Scroll Menu
05:06
106
Products by Category
07:15
107
Cart Items Count
11:22
108
Profile Page
09:18
109
Updating User Profile
10:26
110
New Profile Page UI
08:00
111
Loading UI
08:29
112
Error Page
04:02
113
Image Component
07:20
114
Cart Page
03:58
115
Fetching Cart Details
18:45
116
Updating Cart Items
04:49
117
Deleting Cart
02:01
118
Empty Cart Message
02:25
119
Setting up Stripe
10:02
120
Checkout Session URL
15:31
121
Final Checkout
07:32
122
Order Model
07:27
123
Stripe CLI
04:09
124
Using Webhook
12:07
125
Creating New Order
10:41
126
Recounting Stock
04:05
127
Instant Checkout
07:55
128
Creating Order
06:58
129
Fetching Orders of Profile
05:08
130
Rendering Orders
04:17
131
Orders UI Admin
15:15
132
Update Delivery API Route
05:31
133
Updating Delivery Status
04:44
134
Review Form
05:57
135
Review Model
03:43
136
Create/Update Review
07:08
137
Submitting Review Form
05:47
138
Fetching Review Details
08:42
139
Rendering Reviews
08:28
140
Average Rating
09:11
141
Rating Stars
11:12
142
Rendering Rating Stars
05:45
143
Fetching Sales History
18:47
144
Sales Chart
08:57
145
Sales Page UI
04:02
146
Fixing Review Issue
06:32
147
Fixing Sales Page Issue
01:53
148
Out of Stock
02:15
149
Fetching Similar Products
03:12
150
Rendering Similar Products
08:58
151
Latest Order inside Profile Page
03:26
152
History Model
03:55
153
Recording History
08:50
154
Admin Search
08:19
155
Search Bar
04:49
156
Search Filter UI
02:35
157
Search Filter
18:38
158
Searching Products
09:21
159
Clear Filter
03:26
160
Wishlist Button
03:22
161
Wishlist Api Route
08:30
162
Updating Wishlist
04:04
163
Fetching Wishlisted Products
07:24
164
Wishlisted Products UI
07:44
165
Updating Wishlist
02:38
166
Using Real Database
11:55
167
Custom Domain
03:37
168
Verify Domain Inside Mailtrap
04:20
169
Sending Real Emails
10:49
170
The Fix
11:21
171
Stripe Webhook
07:15
Unlock unlimited learning

Get instant access to all 170 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 enrolling in this course?
The course does not explicitly require prior experience with Next.js or full stack development. However, familiarity with basic JavaScript and React will be beneficial since Next.js builds upon these technologies. The course covers foundational topics like Node.js, MongoDB, and TypeScript, making it accessible to those new to these tools.
What projects will I build during the course?
Throughout the course, you will build a fully functional e-commerce website using Next.js. The project involves setting up a React TypeScript project, handling user authentication, managing a MongoDB database, and deploying the application. You'll also implement features such as a sign-up form, password reset, and email verification.
Who is the target audience for this course?
This course is ideal for aspiring full stack developers interested in building e-commerce applications. It is suitable for those looking to deepen their understanding of Next.js, whether you're a beginner or have some experience with React and want to expand your skill set with server-side rendering and advanced routing techniques.
What specific tools and technologies will I learn in this course?
The course teaches essential tools and technologies, including Next.js for server-side rendering and routing, TypeScript for type-safe JavaScript development, MongoDB for database management, and Cloudinary for handling media assets. You'll also learn to use Mailtrap for email testing and verification.
What topics are not covered in this course?
The course focuses primarily on building e-commerce sites with Next.js and does not cover other frameworks or libraries outside the mentioned tools like Angular or Vue.js. It also does not delve into advanced database optimization techniques or server management beyond the basic setup with MongoDB.
How much time should I expect to commit to complete the course?
The course consists of 171 lessons, but the runtime is not specified, so the time commitment will vary depending on your pace. It's recommended to allocate regular study sessions to fully grasp each module, especially when handling complex topics like authentication and database management.
How will the skills learned in this course benefit my career or other courses?
Mastering Next.js and associated technologies will enhance your ability to build scalable, performant web applications. The full stack skills you gain can be applied to a range of real-world projects, making you a versatile developer. This foundation is beneficial for pursuing advanced courses in web development or specialized roles in front-end or full stack development.