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
The Next.js 13 Bootcamp - The Complete Developer Guide

The Next.js 13 Bootcamp - The Complete Developer Guide

Loại khoá học: Web Development

Learn all the new features of Next.js 13 by building a restaurant reservation app.

image
50.000 VND
1.399.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ả

NextJS 13 is an amazing higher level framework, built on top of React, that will totally change the way you think about and build web applications.

In this course, we will learn all about the amazing features NextJS 13 has to offer by building a restaurant reservation application where people can view restaurants and reserve tables.

Firstly we are going to explore the file system in NextJS 13. We are going to learn how to create static and dynamic routes by simply defining files and folders.

We are then going to look at how to handle loading, error, not found, and success states within our application.

Then we will move onto the rendering modes of React components. We will learn about the differences between server and client components and when we should use one over the other.

Following that, we will dive into the server side of NextJS. We will spin up a Postgres database and define the models we need with Prisma (ORM). We will learn how to fetch data from this database, depending on the component we are utilizing.

We will then move to the backend and start defining some authentication endpoints. We will implement authentication for scratch by utilizing middleware, hashers and json web tokens.

The authentication endpoints will be consumed by our client and the user data will be stored  globally with the context API.

We then move onto the completing our application by building the availability and scheduling system. We will utilize multiple algorithms and logical thinking to accomplish this.

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

Build a large production ready application with Next 13

Handle loading, error, success, and not found states appropriately

The different rendering modes of React components

Handle authentication with middleware and server routes

Yêu cầu

  • You will need to know the basics of ReactJS. A good understanding of hooks and components would suffice.

Nội dung khoá học

12 sections

Introduction

2 lectures
Course Outline
06:29
Course Setup
03:19

File Based Routing and Navigation

12 lectures
[MUST READ] - AN IMPORTANT MESSAGE
00:19
Create a Next App
07:09
Exploring the Files and Folders
02:04
Adding Tailwind CSS
08:41
Your Two Options
01:49
Defining the Pages We Want
04:23
Understanding File Based Routing
07:12
Creating Those Pages
05:01
Challenge Solution
03:32
The Two Ways of Navigating Between Routes
02:49
The Link Component
06:33
Programmatic Navigation With the useRouter Hook
05:28

Next Components (Server and Client)

5 lectures
Cleaning Our Code With Components
07:12
Refactoring Our Pages
14:02
Some More Refactoring
05:01
Server vs Client Components
10:56
Exploring Which Components Should Be Client and Which Should Be Server
06:13

Defining Page Layouts and Head Meta

4 lectures
Our Code is Not Very DRY
03:38
Placing Universally Used Components in the Root Layout
06:04
Nested Components
05:06
Updating the Head Meta for Each Page
07:05

Fetching Data in Server Components

12 lectures
A Little SQL Lesson
08:31
Connecting to a Postgres Database
05:59
Defining Our SQL Schema
17:08
Seeding Our Database
01:51
How We Fetch Data in Server Components
02:50
Fetching Data in a Server Component
04:23
A Little TypeScript Lesson
07:25
Rendering the Fetched Data
07:07
A Common Error You Might Encounter
02:04
Fetching a Restaurant By Slug
09:32
Populating the Data in the Restaurant Page
10:34
Fetching the Restaurant's Menu
07:54

Time to Get Your Hands Dirty

18 lectures
Challenge 1 - Add Query Params
02:21
Solution for Challenge 1
01:44
Challenge 2 - Fetch Restaurants By Location
01:52
Solution for Challenge 2
09:51
Challenge 3 - Populating Data
00:59
Solution for Challenge 3
05:23
Challenge 4 - Fetching Data for Side NavBar
00:31
Solution for Challenge 4
04:33
Challenge 5 - Adding Query Params
01:36
Solution for Challenge 5
12:20
Challenge 6 - Filtering By Query Params
00:34
Solution for Challenge 6
08:10
Challenge 7 - Defining the User and Review Model
02:30
Solution for Challenge 7
04:28
Challenge 8 - Fetching Reviews Data
04:11
Solution for Challenge 8
17:24
Adding a Stars Component
10:46
More Star Components Stuff...
04:05

Handling Loading and Error States

5 lectures
Introduction to Loading State
02:13
Adding a Loading State
05:46
Overriding the Default Loading State
03:04
Handling Error States
08:34
Handling Not Found States
02:50

Implementing Authentication

15 lectures
What is Authentication
02:15
Adding Material UI
11:38
Adding the Modal Content
13:37
Completing the Modal Functionality
10:06
Steps to Implement Authentication
04:52
Creating an Endpoint
06:07
Validating the User's Input
11:39
Validating That the User's Doesn't Already Have an Account
03:51
Exploring Password Storage Solutions
10:06
Hashing Our Password
02:01
Creating a User
01:32
Creating and Sending a JSON Web Token
09:06
Implementing the Sign in Endpoint
12:14
Identifying Users With Json Web Token
16:05
Adding Middleware
13:00

Global State With Context API

12 lectures
Adding Client Side Validation
05:37
Creating a Custom useAuth Hook
08:31
Discussing the Authentication State
04:23
Creating a AuthContext Component
15:54
Handling the Loading State
08:07
Handling the Error State
02:07
Saving the JWT to Our Browser's Cookie
10:13
Doing the Same Thing For the Signup Function
07:27
Persisting an Auth State
13:29
Fixing the Issue... Sorry
02:43
Conditionally Rendering UI Based on the Auth State
05:09
Implementing the Logout Functionaility
03:53

Building an Availability System

21 lectures
Intro to Scheduling and Availability
01:23
The Rules We Will Follow
04:11
Rendering the Party Size Options
04:52
Rendering a DatePicker Component
05:49
Dynamically Rendering the Time Options
12:39
Understanding Many to Many Relationships
09:18
Defining Our New Models
08:29
The Availability Endpoint Overview
03:54
Building the Availability Endpoint
06:39
Step 1: Determining the Search Times
04:24
Step 2: Fetching the Bookings
14:36
Step 3: Compressing the Booking
04:57
Step 4: Fetching the Restaurant Tables
01:36
Step 5: Reformatting the Search Times
02:15
Step 6: Filtering Out the Booked Tables
02:55
Step 7: Determining the Availability
04:45
Step 8: Filtering by Restaurant Time Window
05:00
Building a useAvailabilities Hook
08:04
Storing the Reservation Criteria in State
12:55
Rendering the Available Time Options
09:52
Converting the Time to a Displayable Time
03:08

Building the Scheduling System

13 lectures
The Reservation Endpoint
04:18
Step 1: Validation
04:31
Step 2.0: Extracting the Table Availability Logic Into it's Own Function
07:42
Step 2.5: Determining the Available Tables
07:43
Step 3: Count the Tables Based on Seats
02:41
Step 4: Determine the Tables to Book
04:31
Step 5: Creating the Booking and Linking it to the Tables
14:57
Dynamically Rendering Data for the Reserve Header
05:46
Extracting the Query Params
06:14
Storing Our Inputs in State
08:50
Creating a useReservation Hook
04:00
Making a Reservation From the Client
09:06
Showing a Success State
06:05

Appendix A - Building the UI

9 lectures
The Nav and Header
10:04
The Search Bar and Restaurant Card
13:34
The Restaurant Page
03:38
The Title and Description
07:55
The Image Gallery
08:54
The Reservation Card
08:53
The Menu Page
07:42
The Search Page
15:31
The Reserve Page
08:57

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