Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Next.js
Next.js - Build Full Stack Apps with Next.js & TypeScript

Next.js - Build Full Stack Apps with Next.js & TypeScript

Loại khoá học: Web Development

Next.js - Learn Next.js to build Full Stack, Production Ready & Powerful Apps using Redux, next-auth, Stripe & Vercel

image
50.000 VND
1.599.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

If you want to build a Full-stack App in React (Next js) or if you want to learn how to implement server-side rendering then welcome to this Ultimate Next.js course.


In this course, we will use Next js which is a production-ready React.js framework. This is one of the most powerful tools with its three most key features:


  • File-based routing

  • Server-Side Rendering

  • Full-stack application development


And in this course, we are going to use all these features and implement them in our project. Not only this, but we will also learn How we can implement Redux for state management in Next.js with Server Side Rendering.


We will use next-auth which is the most popular package used with next for ultimate and powerful authentication.

We will make a full-stack Hotel Booking Application that is only built with Next.js.

We will integrate Stripe Payment Gateway to accept payment from users and follow the best practices for that.


SUPER FRIENDLY SUPPORT:

If you ever get stuck in any problem, I'm here to unstuck you. I always respond as fast as I can. Because I know there’s nothing worse than getting stuck into problems, especially programming problems. So, I am always here to support you.


You can watch the complete DEMO of this project in the course content. If you are ready to build Production-Ready, Full Stack, Server Side Rendered Apps then I will see you in the course.


Course Content:


  • Setting up Environment

  • Why Next.js?

  • Starting BookIT Project with Next.js

  • Adding Rooms Resource

  • Custom Error Handling

  • Adding Filters, Search, Pagination

  • Let's start BookIT Frontend

  • Data Fetching in Next.js

  • Implementing Redux for State Management

  • Adding Pagination, Search on Frontend

  • Authentication with next-auth

  • Protected Routes & Handle User

  • Handle Room Bookings

  • Adding Stripe for Payments

  • Handle Room Reviews

  • Admin Routes - Part 1

  • Admin Routes - Part 2

  • Deploying on Vercel

Bạn sẽ học được gì

Learn all important features of Next JS

Learn Server Side Rendering with Next

Learn how file base routing works in Next

Learn all different ways to pre fetch data

Learn how to build full React stack application in Next JS

Learn how to build production ready react apps

Learn how to implement authentication with next-auth

Learn how to implement Redux properly for State management in Next

Learn how to integrate modern payment gateway like Stripe

Learn how to integrate third party image hosting server like Cloudinary

Learn how to handle errors properly

Learn how to deploy full stack app on Vercel

Yêu cầu

  • You must have good knowledge React and of course JavaScript
  • You must know the basic of Redux & State managment
  • Must be familiar with main technologies like Node, React, MongoDB
  • Nothing else, Just you and your precious time

Nội dung khoá học

42 sections

Introduction

2 lectures
Introduction of Course
01:46
Project (BookIT) Complete Demo
16:56

Setting up Environment

2 lectures
Installing all required tools
03:54
Install MongoDB Community Server
04:15

How to get the Source Code?

1 lectures
Get BookIT Source Code Details
01:23

Why Next.js?

3 lectures
What is Next.js?
01:29
File Base Routing & Full Stack Apps
02:18
Server Side Rendering
02:55

Starting BookIT Project with Next.js

4 lectures
Installing Next.js & Understanding Folder Structure
05:43
Starting with Backend API
10:24
Setting Up Postman Environment
03:14
Connecting to MongoDB
07:57

Adding Rooms Resource

7 lectures
Creating Room Model
20:13
Create & Save Room - ADMIN
06:12
Fetch all Rooms
03:09
Creating Data Seeder
08:29
Get single Room Details
06:05
Update Room - ADMIN
07:35
Delete Room - ADMIN
03:33

Custom Error Handling

3 lectures
Create Error Handler Class
07:16
Global Async Error Handler
05:47
Validation & Mongoose ID Error
05:50

Adding Filters, Search, Pagination

3 lectures
Search Rooms by Location
10:53
Filter Rooms
05:02
Adding Pagination
08:05

Let's start BookIT Frontend

5 lectures
BookIT HTML & CSS Details
02:10
Setting up layout & Global Provider
06:10
Header & Footer Component
05:32
BookIT Homepage
07:11
Add hot-toast for messages/errors
03:03

Data Fetching, Caching, Revalidating

4 lectures
Server Component vs Client Component
06:34
Data Fetching
04:54
Data Caching
03:18
Data Revalidating
07:26

Handle Error, Room, Room Details & more

4 lectures
Fetch All Rooms & Handle error
09:29
Render all Rooms
06:44
Fetch Room Details & Set Dynamic title
08:22
Render Room Details
16:56

Pagination, Search - Frontend

3 lectures
Adding Pagination
16:18
Search Rooms Component
08:52
Adding additional options in Search
05:30

Authentication with next-auth

6 lectures
Create User Model
06:21
Register User and Encrypt Password
06:51
Handle User Login on Backend
15:06
Login User Component
10:36
Get Session & Show User in Header
05:59
Logout User & Placeholder
04:18

Integrating Redux Toolkit

3 lectures
Creating Redux toolkit store
07:31
Add user to the State
07:57
RTK Query Mutation & Register User
16:52

Protected Routes & Handle User

13 lectures
Update User Profile Endpoint
03:41
Protect Backend API Routes
04:46
Update User Profile Component
09:09
Update User Session
07:55
Protect Frontend Routes with Middleware
04:40
Nested User Layout
12:13
Update Password Endpoint & Fix err Message
09:20
Handle Mongoose Duplicate Key Error
02:21
Update Password Component
07:38
Configure Cloudinary to Upload & Delete File
07:50
Upload User Avatar Endpoint
03:41
Upload User Avatar Component
11:56
Fix User Sidebar Menu BUG!
01:34

Forgot & Reset Password

6 lectures
Generate Forgot Password token
05:06
Setup Nodemailer & Email HTML Template
10:22
Send Password Recovery Email
08:18
Handle Forgot Password Component
05:52
Handle New Password Endpoint
06:12
Handle New Password Component
10:10

Generate & Render Room Map

3 lectures
Setup Node GeoCoder with MapQuest
04:31
Generate & Save Map Coordinates
04:46
Render Map on the Room Details Page
08:53

Handle Room Bookings & Invoice

12 lectures
Create Booking Model
07:32
Display Date Range Picker
10:36
Create & Save New Booking
14:14
Handle Room Availability Endpoint
07:26
Handle Room Availability
05:33
Get all booked dates of Room
08:21
Disable Booked dates on Calendar
05:08
Current User Bookings & Booking Details Endpoint
04:09
Get current user Bookings
13:20
getAuthHeader() for protected endpoints
05:56
View Booking Details Component
10:11
Generate Booking Invoice
15:14

Integrating Stripe for Payments

6 lectures
What is Stripe & Installing Stripe
02:39
Create Stipe Checkout Session
12:57
Process Payment through Stripe Checkout
11:22
Setting Up Stripe WebHook (macOS)
05:34
Setting Up Stripe WebHook (Windows)
01:54
New Booking Endpoint
13:10

Handle Room Reviews & 404 Page

5 lectures
New Review Endpoint
08:47
Submit Review
09:57
Render all Reviews
06:09
Show Submit Review Button
06:51
404 (not-found) Page
04:24

Admin Dashboard & Sales Charts

6 lectures
Admin Layout & Admin Loader
06:35
Authorize Roles
11:34
Dashboard Component & Render Charts
15:49
Get Sales & Booking within Date Range
15:06
Get & Render 6 Months Sales Data
20:17
Get Top 3 Best Performing Rooms by Bookings
18:57

Admin Routes - Part 1

8 lectures
Display All Room
13:18
New Room Component
19:33
Update Room Component
07:54
Revalidate Data
09:26
Upload Room Images Endpoint
05:06
Upload Room Images Component
24:25
Delete Room Image
08:43
Delete Room with Images
04:28

Admin Routes - Part 2

8 lectures
Display All Bookings
06:50
View Booking Details
04:23
Delete Booking
06:57
Display all Users
05:13
Update User
14:09
Delete User
04:16
Display Room Reviews
13:14
Delete Room Reviews
10:36

Deploying on Vercel

2 lectures
Preparing App for Deploy
04:55
Deploying on Vercel
11:21

Final Words

1 lectures
Congratulations!!!
00:44

[OLD VERSION] Why Next.js?

4 lectures
What actually is Next.js?
01:46
Next.js - File Base Routing
02:56
Next.js - Server Side Rendering
02:55
Next.js - Full Stack Apps
01:51

[OLD VERSION] Starting BookIT Project with Next.js

5 lectures
BookIT Project GitHub Link
00:07
Installing Next.js & Understanding Folder Structure
07:03
Starting with Backend API
08:55
Setting Up Postman Environment
04:36
Connecting to MongoDB
07:38

[OLD VERSION] Adding Rooms Resource

7 lectures
Creating Room Model
15:27
Create & Save Room
08:03
Fetch all Rooms
04:22
Creating Data Seeder
10:41
Get single Room Details
05:02
Update Room
04:34
Delete Room
04:36

[OLD VERSION] Custom Error Handling

4 lectures
Create Error Handler Class
08:33
Error Middleware
06:30
Catch Async Errors
05:44
Validation & Mongoose ID Error
07:19

[OLD VERSION] Adding Filters, Search, Pagination

4 lectures
Search Rooms by Location
09:33
Filter Rooms
06:03
Important Note about Next Lecture
00:28
Adding Pagination
08:09

[OLD VERSION] Let's start BookIT Frontend

5 lectures
BookIT HTML & CSS Details
01:38
Setting up _doucment
03:53
Header & Footer Component
03:33
Layout Component
05:16
BookIT Homepage
06:48

[OLD VERSION] Data Fetching & Pre Fetching in Next.js

3 lectures
Understanding getStaticProps()
06:21
getServerSideProps()
05:26
getStaticPaths()
06:44

[OLD VERSION] Implementing Redux for State Management

10 lectures
Creating Redux Store
13:47
All Rooms Reducer
07:52
All Rooms Action
08:43
Important Note about Next Lecture
00:23
Dispatch rooms action in getServerSideProps()
04:05
Display all Rooms on HomePage
10:40
Adding React Toastify
05:24
Room Details Reducer & Action
03:57
Room Details Component
13:37
Room Features Component
07:22

[OLD VERSION] Adding Pagination, Search on Frontend

5 lectures
Pagination Link Issue
00:12
Adding Pagination
11:31
Search Rooms Component
09:43
Adding additional options in Search
08:40
Handle Pagination Issue in Search
03:36

[OLD VERSION] Authentication with next-auth

11 lectures
Create User Model
08:06
Encrypting Password while Registration
10:35
Important Update about Next Auth
02:01
Handle User Login on Backend
18:56
Login User Component
11:24
Adding Cloudinary for Images
08:01
Register User Component
21:32
Current User Profile
09:41
Load Logged In User
06:02
Show User in Header
06:02
Logout User
02:16

[OLD VERSION] Protected Routes & Handle User

9 lectures
Using getServerSideProps() to Protect Routes
06:16
Update User Profile Endpoint
06:33
Update User Profile Reducer & Action
04:29
Update User Profile Component
10:07
Generate Forgot Password token
06:57
Send Password Recovery Email
17:30
Handle Forgot Password Component
11:05
Handle New Password Endpoint
06:22
Handle New Password Component
10:10

[OLD VERSION] Handle Room Bookings

13 lectures
Login Button Blink Issue in Header
02:42
Create Booking Model
06:04
Display Date Range Picker
07:25
Create & Save New Booking
12:39
Handle Room Availability Endpoint
07:59
Handle Room Availability
12:58
Get all booked dates of Room
06:41
Fixing the Date Zone Issue
06:37
Disable Booked dates on Calendar
07:44
Display All Bookings
20:44
View Booking Details
06:22
View Booking Details Component
09:35
Generate Booking Invoice
09:21

[OLD VERSION] Integrate Stripe for Payments

5 lectures
What is Stripe?
03:39
Create Stipe Checkout Session
12:52
Process Payment through Stripe Checkout
12:50
What is Stripe WebHook?
04:40
New Booking Endpoint
13:33

[OLD VERSION] Handle Room Reviews

6 lectures
New Review Endpoint
08:31
Submit Review Reducer & Action
05:05
Submit Review
14:51
Display all Reviews
05:27
Show Submit Review Button
09:10
_404 Page
03:17

[OLD VERSION] Admin Routes - Part 1

10 lectures
Authorize Roles
07:12
Display All Room
15:45
New Room Reducer & Action
05:58
New Room Component
24:03
Update Room Reducer & Action
06:31
Update Room Component
16:52
Delete Room
07:56
Display All Bookings
08:43
Delete Booking
08:52
View Booking Details
07:17

[OLD VERSION] Admin Routes - Part 2

5 lectures
Display all Users
11:06
Update User
19:27
Delete User
07:20
Display Room Reviews
14:25
Delete Room Reviews
13:21

[OLD VERSION] Deploying on Vercel

5 lectures
Export a Static Website
03:45
Preparing App for Deploy
05:27
Push BookIT on GitHub
03:14
Deploying on Vercel
04:47
BookIT Speed Test
01:41

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
Angular - The Complete Guide (2024 Edition)

Angular - The Complete Guide (2024 Edition)

120 VND
50.000 VND
.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

100 VND
50.000 VND
Unreal Engine 5: The Complete Beginner's Course

Unreal Engine 5: The Complete Beginner's Course

1.899.000 VND
50.000 VND
Complete WordPress Developer Course 2023 - Plugins & Themes

Complete WordPress Developer Course 2023 - Plugins & Themes

1.999.000 VND
50.000 VND
The Data Science Course: Complete Data Science Bootcamp 2024

The Data Science Course: Complete Data Science Bootcamp 2024

140 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi