Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Mastering Next.js 14 - Build Airbnb Clone from Scratch

Thành thạo Next.js 14 - Xây dựng ứng dụng Airbnb Clone từ đầu

Thành thạo Next.js 14 - Xây dựng ứng dụng Airbnb Clone từ đầu

Xây dựng ứng dụng Full-Stack Airbnb với Next.js 14+, Typescript, Clerk Auth, Prisma, Supabase, Tailwind, Shadcn-ui, Zod, Vercel

4.6
(477 đánh giá)
4,264 học viên
Giảng viên
Jānis Smilga
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 1.459.000đ -97%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
18.5 giờ video
178 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

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

Xây dựng ứng dụng Next JS hiện đại
Xác thực ứng dụng Next JS của bạn với Clerk
Xây dựng component với Shadcn/ui
Lưu trữ dữ liệu trong cơ sở dữ liệu với Prisma và Supabase
Lưu trữ hình ảnh trong cơ sở dữ liệu
Làm việc với server actions

Yêu cầu

Kiến thức về React

Đối tượng phù hợp

Dành cho lập trình viên React muốn xây dựng ứng dụng full-stack với Next JS 14

Nội dung khóa học

6 phần • 178 bài giảng
1 Thông tin hữu ích
2 Github Repository
3 Kênh Discord
1 Cập nhật !!!
2 Thông tin quan trọng !!!
3 Cài đặt
4 Tệp và thư mục
5 Trang chủ
6 Tạo trang
7 Component Link
8 Route lồng nhau
9 CSS
10 Thông tin về Tailwind (tùy chọn)
11 Component Layout
12 Component Navbar
13 Phông chữ
14 Metadata
15 Server vs Client
16 Bộ đếm
17 Lấy dữ liệu
18 Tái cấu trúc
19 Component Loading
20 Component Error
21 Layout lồng nhau
22 Trang động
23 Hình ảnh cục bộ
24 Hình ảnh từ xa
25 Hình ảnh đáp ứng
26 Tùy chọn định tuyến khác
27 Thông tin về Server Actions
28 Trang Actions - Thiết lập
29 Tệp Actions
30 Lưu người dùng
31 Lấy danh sách người dùng
32 Xác thực lại cache và chuyển hướng
33 Hook UseFormStatus
34 Hook UseFormState
35 Nút xóa
36 Input ẩn
37 Phương thức Bind
38 Thông tin về Route Handlers
39 Route Handler - GET
40 Route Handlers - Tham số
41 Route Handlers - POST
42 Middleware
43 Build cục bộ
44 Cache
1 Thông tin quan trọng !!!
2 Tổng quan dự án
3 Cài đặt ứng dụng Next.js mới
4 Xóa mã mẫu
5 Tạo trang
6 Cập nhật quan trọng !!!
7 Cài đặt thư viện Shadcn/ui
8 Component Button của Shadcn/ui
9 Cài đặt thêm các component Shadcn/ui
10 Cấu trúc Navbar
11 Component Logo và NavSearch
12 Thay đổi giao diện với Shadcn/ui
13 Thiết lập chế độ tối với Shadcn/ui
14 Component LinksDropdown
15 Thông tin quan trọng !!!
16 Thiết lập và tùy chỉnh Clerk Auth Provider
17 Component SignOutLink
18 Component LinksDropdown
19 Tạo hồ sơ - Thiết lập
20 Component FormInput
21 Component SubmitButton
22 Component FormContainer
23 Tái cấu trúc trang Tạo hồ sơ
24 Thư viện Zod
25 Thông tin quan trọng !!!
26 Thiết lập Supabase
27 Thiết lập Prisma
28 Kết nối Prisma và Supabase
29 Ví dụ về CRUD với Prisma
30 Tạo Model Profile và createProfileAction
31 Hành động lấy hình ảnh hồ sơ
32 Chỉnh sửa trang Tạo hồ sơ
33 Lấy thông tin hồ sơ người dùng
34 Trang Cập nhật hồ sơ
35 Phương thức Zod SafeParse
36 Hàm trợ giúp ValidateWithZodSchema
37 Input hình ảnh
38 Container Input hình ảnh
39 Xác thực hình ảnh với Zod
40 Supabase Bucket và Keys
41 Tải hình ảnh lên Supabase
42 Hành động cập nhật hình ảnh hồ sơ - Hoàn thiện
43 Schema Property
44 Trang Tạo tài sản - Thiết lập
45 Input giá
46 Input danh mục
47 Input mô tả
48 Input quốc gia
49 Input bộ đếm
50 Input tiện nghi
51 Tạo tài sản
52 Lấy danh sách tài sản
53 Trang chủ - Thiết lập
54 Danh sách danh mục
55 Danh sách trống
56 Container tài sản
57 PropertyCard - Thiết lập
58 PropertyCard - Cấu trúc
59 Đánh giá tài sản
60 Nút bật/tắt yêu thích
61 Tên quốc gia và cờ
62 Card tải
63 Component NavSearch
64 Nút đăng nhập cho mục yêu thích
65 Lấy danh sách yêu thích
66 Form bật/tắt yêu thích
67 Chức năng bật/tắt yêu thích
68 Trang yêu thích
69 Trang chi tiết tài sản - Thiết lập
70 Component Breadcrumbs
71 Component nút chia sẻ
72 Component container hình ảnh
73 Component lịch
74 Component chi tiết tài sản
75 Component thông tin người dùng
76 Component mô tả
77 Component tiện nghi
78 Component bản đồ tài sản
79 Lỗi Supabase !!!
80 Triển khai ứng dụng trên Vercel
81 Model đánh giá
82 Component RatingInput
83 Component SubmitReviews
84 Chức năng gửi đánh giá
85 Lấy danh sách đánh giá
86 Hiển thị đánh giá
87 Component ReviewCard
88 Lấy và xóa đánh giá của người dùng
89 Component IconButton
90 Trang đánh giá
91 Component tải đánh giá
92 Component PropertyRating - Hoàn thiện
93 Cho phép đánh giá
1 Model đặt chỗ
2 Component đặt chỗ
3 Thư viện Zustand
4 Container / Lịch đặt chỗ - Thiết lập ban đầu
5 Tính tổng
6 Form đặt chỗ
7 Component xác nhận đặt chỗ
8 Hành động tạo đặt chỗ
9 Khoảng thời gian bị chặn
10 Ngày bị vô hiệu hóa
11 Lấy và xóa đặt chỗ
12 Trang đặt chỗ
13 Xóa đặt chỗ
14 Component bảng tải
1 Hàm lấy và xóa cho thuê
2 Trang cho thuê
3 Hàm lấy chi tiết cho thuê
4 Trang chỉnh sửa cho thuê
5 Vấn đề với Input tiện nghi
6 Hàm cập nhật cho thuê
7 Trang đặt phòng - Thiết lập
8 Lấy danh sách đặt phòng
9 Trang đặt phòng - Hoàn thiện
10 Trang quản trị - Thiết lập
11 Trang quản trị - Middleware
12 Trang quản trị - Component tải
13 Trang quản trị - Container thống kê
14 Trang quản trị - Lấy dữ liệu biểu đồ
15 Trang quản trị - Container biểu đồ
16 Stripe - Thiết lập
17 Stripe - Trang thanh toán
18 Stripe - Route thanh toán
19 Stripe - Route xác nhận
20 Stripe - Tái cấu trúc truy vấn
21 Thống kê đặt phòng
22 Sửa lỗi triển khai !!!
23 Thiết lập Atlas - Video tùy chọn !!!
1 Phần thưởng

Giới thiệu khóa học

Start your path to becoming a proficient web developer with our detailed video course on building apps using Next JS 14. Designed specifically for beginners and intermediate developers, this course will help you develop high-level skills. Begin by creating a Next.js application from scratch, understanding its structure, and mastering advanced routing techniques, including link components and dynamic paths.

Delve into front-end design using TailwindCSS and Shadcn/ui, mastering responsive design, theme management, and consistent styling with layout components. Learn the fundamentals of backend development, including the distinctions between server and client components, how to fetch data, manage loading states, and implement error handling along with nested layouts.

Enhance your app with CRUD functionalities through Server Actions, improve user interaction, and ensure data integrity with the Zod library. You will also integrate a database using Supabase, handle image uploads, and implement crucial functionalities like authentication with CLERK Service.

Conclude the course with the skills to deploy your NextJS app on Vercel, and incorporate features such as prompt handling, response management, and image generation.

This course offers a practical approach, including numerous challenges to apply what you've learned. Transform your web development skills and gain the confidence to create sophisticated web applications.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Next Js
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊