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

Next.js From Scratch

Next.js Từ Cơ Bản

Next.js Từ Cơ Bản

Xây dựng dự án thực tế với Next.js và MongoDB

4.5
(1,732 đánh giá)
9,676 học viên
Giảng viên
Brad Traversy
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
10.0 giờ video
77 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ì

Học Kiến Thức Cốt Lõi Của Next JS
Xây Dựng Trang Web Cho Thuê Bất Động Sản Thực Tế Từ Đầu
Định Tuyến Theo Tệp, React Server Components, Truy Vấn Dữ Liệu, API Routes+
Next Auth & Google Provider Cho Xác Thực & Phân Quyền
Sử Dụng MongoDB & Mongoose Trong Server Actions
Hệ Thống Tin Nhắn Nội Bộ, Đánh Dấu, Tìm Kiếm, Hộp Ảnh, Phân Trang+
Triển Khai Cloudinary Để Lưu Trữ & Tối Ưu Hóa Hình Ảnh

Yêu cầu

Bạn cần có kiến thức cơ bản về JavaScript và React

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

Dành cho những người đã hiểu React và muốn bắt đầu xây dựng các trang web, ứng dụng mạnh mẽ hơn với Next JS

Nội dung khóa học

10 phần • 77 bài giảng
1 Chào Mừng Đến Với Khóa Học
2 Demo Dự Án PropertyPulse
3 Next.js Là Gì?
4 Các Tính Năng Của Next.js
5 Thiết Lập Môi Trường
6 Tệp Giao Diện Dự Án
1 Dự Án Mới & Cấu Hình Tailwind
2 Layout & Trang Chủ
3 Metadata & Tài Nguyên
4 Định Tuyến Theo Tệp
5 Server vs Client Components
6 Client Component & Navigation Hooks
7 Bắt Đầu Xây Dựng Component Navbar
8 Liên Kết Navbar, Trạng Thái Dropdown, Biểu Tượng
9 Liên Kết Đang Hoạt Động & Render Có Điều Kiện
10 Các Component Trang Chủ & Footer
11 Trang Danh Sách Bất Động Sản & Component PropertyCard
12 Danh Sách Bất Động Sản Trên Trang Chủ
13 Trang Tùy Chỉnh "Không Tìm Thấy" & "Đang Tải"
1 Tạo Cơ Sở Dữ Liệu MongoDB
2 MongoDB Compass & Nhập Dữ Liệu
3 Kết Nối Cơ Sở Dữ Liệu & Mongoose
4 Mô Hình Property & User
5 Truy Vấn Dữ Liệu Bằng Server Component
6 Chi Tiết Bất Động Sản & Ảnh Tiêu Đề
7 Component Chi Tiết Bất Động Sản
8 Giới Thiệu Về API Routes
1 Next Auth Là Gì?
2 Thiết Lập Google OAuth
3 Thiết Lập Next Auth & Provider
4 Nút Đăng Nhập
5 Lưu Người Dùng Vào Cơ Sở Dữ Liệu & Phiên
6 Ảnh Hồ Sơ
7 Nút Đăng Xuất
8 Bảo Vệ Các Route
1 Biểu Mẫu Thêm Bất Động Sản
2 Server Actions
3 Định Dạng Dữ Liệu Bất Động Sản
4 Lấy Thông Tin Người Dùng Từ Phiên
5 Loại Bỏ Try/Catch Từ getSessionUser
6 Gửi Bất Động Sản Vào Cơ Sở Dữ Liệu
7 Trang Lỗi Tùy Chỉnh
8 Tải Ảnh Lên Cloudinary
9 PropertyCard & Ảnh Tiêu Đề
10 Component PropertyImages
1 Hiển Thị Thông Tin Hồ Sơ Người Dùng
2 Danh Sách Bất Động Sản Của Người Dùng
3 Chuẩn Hóa Lean Documents
4 Xóa Bất Động Sản
5 Thông Báo Toast
6 Biểu Mẫu Chỉnh Sửa Bất Động Sản
7 Hành Động Cập Nhật Bất Động Sản
1 Geocode Để Lấy Vĩ Độ & Kinh Độ
2 Hiển Thị Bản Đồ Mapbox
3 Thanh Bên Trang Chi Tiết Bất Động Sản
4 Hành Động Đánh Dấu Bất Động Sản
5 Chức Năng Nút Đánh Dấu
6 Kiểm Tra Trạng Thái Đánh Dấu
7 Trang Bất Động Sản Đã Lưu
8 Nút Chia Sẻ
1 Component Tìm Kiếm Bất Động Sản
2 Truy Vấn Kết Quả Tìm Kiếm
3 Hiển Thị Kết Quả Tìm Kiếm
1 Mô Hình Tin Nhắn & Hành Động addMessage
2 Gửi Tin Nhắn & Hook useFormState
3 Hook useFormStatus
4 Truy Vấn Tin Nhắn
5 Hiển Thị Tin Nhắn
6 Đánh Dấu Đã Đọc
7 Xóa Tin Nhắn
8 Global Context Cho Số Lượng Tin Nhắn
9 Lấy Số Tin Nhắn Chưa Đọc
1 Logic Phân Trang
2 Component Phân Trang
3 Photoswipe Lightbox
4 Bất Động Sản Nổi Bật
5 Triển Khai Lên Vercel

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

This is a project based course that will teach you how to use Next.js in the real world. We use the Next.js framework to build a property rental website where users can browse, search and manage property listings.


Next.js is the future of React. Server-side rendered websites and static websites are becoming the norm over single page applications and Next.js allows you to build both with ease. Learning Next will give you a huge advantage when it comes to modern web development.


The project will have the following features:


  • User authentication with Google & Next Auth

  • User authorization

  • Server Actions & Database Interaction

  • Route protection

  • User profile with user listings

  • Property Listing CRUD

  • Property image upload (Multiple)

  • Cloudinary integration

  • Property search

  • Internal messages with 'unread' notifications

  • Photoswipe image gallery

  • Mapbox maps

  • Toast notifications

  • Property bookmarking / saved properties

  • Property sharing to social media

  • Loading spinners

  • Responsive design (Tailwind)

  • Custom 404 page

This course will give you all of the skills that you need to start creating your own full stack Next.js applications.


Here are some of the packages and technologies that we will be using:


  • Next.js 14

  • React

  • Tailwind CSS

  • MongoDB

  • Mongoose

  • Next Auth

  • React Icons

  • Photoswipe

  • Cloudinary

  • Mapbox

  • React Map GL

  • React Geocode

  • React Spinners

  • React Toastify

  • React Share


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