Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Complete React and NextJS course with AI powered Projects

Khóa học React và NextJS toàn diện với các dự án tích hợp AI

Khóa học React và NextJS toàn diện với các dự án tích hợp AI

Học React & Next.js thông qua việc xây dựng các dự án AI với Convex, Supabase, Drizzle và các cổng thanh toán sẵn sàng cho sản xuất

4.6
(648 đánh giá)
4,340 học viên
Giảng viên
Hitesh Choudhary
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 349.000đ -77%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
64.5 giờ video
252 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026
#Frontend Development #Next Js #React #Web Development

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

Thành thạo React và Next JS
Xây dựng ứng dụng React và Next.js full-stack với các phương pháp hiện đại tốt nhất
Tích hợp tính năng AI sử dụng OpenAI/Gemini APIs với các route server an toàn
Triển khai xác thực và phân quyền bằng các nhà cung cấp auth hiện đại
Triển khai ứng dụng sẵn sàng cho môi trường sản xuất với hiệu suất và SEO tối ưu

Yêu cầu

Hiểu biết cơ bản về HTML, CSS và JavaScript cơ bản
Máy tính có khả năng chạy Node.js và một trình soạn thảo code hiện đại
Sẵn sàng học Next.js, backend APIs và các khái niệm React

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

Dành cho lập trình viên muốn thành thạo React và Next.js thông qua các dự án AI thực tế
Người mới bắt đầu muốn trở thành lập trình viên full-stack với các công cụ hiện đại
Người học React muốn bổ sung kỹ năng backend, cơ sở dữ liệu và thanh toán
Bất kỳ ai muốn xây dựng ứng dụng AI SaaS sẵn sàng cho sản xuất từ đầu đến cuối

Nội dung khóa học

29 phần • 252 bài giảng
1 Giới thiệu về khóa học
2 Tải xuống file code
1 React là gì và tại sao nên sử dụng nó?
2 Phiên bản React và tài liệu React
3 Chúng ta cần một bundler - Vite
4 Ứng dụng React đầu tiên của bạn trên trình duyệt
5 React trên các trình soạn thảo code trực tuyến
6 Hiểu rõ từng file trong React (đã cập nhật)
7 Chọn lộ trình học React của bạn
8 Lệnh build trong React
9 Đưa ứng dụng React của bạn lên môi trường sản xuất
1 Cấu hình Tailwind trong ứng dụng React
2 Xây dựng Card với Tailwind
3 Props trong React là gì?
4 Xây dựng Component đầu tiên của bạn
5 Component tùy chỉnh với Props
6 Xây dựng nhanh hơn với các Component Tailwind
7 Tổng quan về Shadcn components và thiết lập
8 Dự án sắp tới - Chuẩn bị sẵn sàng
1 Giới thiệu dự án Counter với Forms
2 Môi trường chạy Javascript - Node và Bun cho React
3 Viết các phần tử HTML và Form trong React
4 Đằng sau hậu trường của State trong React
5 Hooks trong React là gì?
6 Đi sâu vào useState hook
7 Xử lý Form trong React
1 Hướng dẫn chi tiết dự án Quản lý Hàng đợi
2 Lập kế hoạch luồng công việc ứng dụng
3 Tìm hiểu luồng dữ liệu trong các Component React
4 Xử lý Form và truyền dữ liệu lên Component cha
5 Một chuyến du ngoạn nhỏ với map và filter trong Javascript
6 Hiểu về Conditional rendering trong React
7 Gỡ lỗi trong nhiều Component
1 Các loại Props khác nhau và Context
2 Thiết lập ứng dụng Vite cho Props trong React
3 Thiết kế các biến thể Button với Props
4 Children props trong React
5 Props phức tạp với dữ liệu phức tạp trong React
6 useRef và forwardRef trong React
7 Context API và prop drilling
8 Tạo Context API Provider đầu tiên của bạn
9 Tạo Custom Hook đầu tiên của bạn
10 Sử dụng Context trong nhiều Component
1 Thiết lập ứng dụng cho Custom Hooks
2 Thiết kế Component cho giỏ hàng mua sắm
3 useEffect hook cho phỏng vấn
4 Đồng bộ hóa giữa các tab
5 Xử lý các thao tác với giỏ hàng
6 Hoàn thiện với các tính năng Custom Hook
7 Gỡ lỗi ứng dụng - Quy trình tư duy
1 Các thư viện Quản lý State
2 Tạo Store đầu tiên của bạn trong Zustand
3 Chỉ Subscribe vào những gì bạn cần
4 Một Store với nhiều Slice
5 Async actions cho các lệnh gọi API
1 Giới thiệu về loạt bài Git
2 Git init và thư mục ẩn
3 Git commits và logs
4 Cách hoạt động nội bộ và cấu hình của Git
5 Git merge và git conflicts
6 Git Diff và stashing
7 Git rebase không đáng sợ như bạn nghĩ
8 Cái nhìn sâu sắc về việc đẩy code lên Github
9 Cách tạo Pull Request và đóng góp vào Mã nguồn mở
1 Câu chuyện Javascript - từ console đến v8 engine
2 Javascript thực thi code như thế nào - Đằng sau hậu trường
3 Kiểu dữ liệu, biến và hằng số trong Javascript
4 Các phép toán trong Javascript
5 Kiểu dữ liệu nguyên thủy trong Javascript
6 Kiểu dữ liệu không nguyên thủy trong Javascript
7 Năm thử thách về điều kiện trong Javascript
8 Đối mặt với mười thử thách về Mảng và phương thức
9 Giới thiệu về vòng lặp trong Javascript
10 Chinh phục 6 thử thách vòng lặp trong Javascript
11 Mười thử thách vòng lặp để học tất cả các loại vòng lặp trong Javascript
12 Hàm, arrow function, THIS và ngữ cảnh trong Javascript
13 Higher order function và hàm lồng nhau trong Javascript
14 Lớp học chuyên sâu về Prototypes trong Javascript
15 Functional constructor và Lỗi
16 Lớp, Đối tượng và Kế thừa trong Javascript
17 Đóng gói, Đa hình, Trừu tượng và getters setters
18 DOM và BOM cơ bản trong Javascript
19 Giải quyết 5 thử thách về DOM
20 Kết thúc DOM với 5 thử thách nữa
21 Javascript bất đồng bộ với event loop
22 Closures trong Javascript
23 Promises và promise chaining
24 Kế thừa nguyên mẫu trong Javascript
25 THIS và ràng buộc ngữ cảnh
26 Async-await và Promise all
27 Iterator và generators trong Javascript
28 ES6 Modules và CommonJS
29 Demo dự án 1 - Todo với Local Storage
30 Thêm một task vào mảng
31 Xử lý local storage và sự kiện DOM
32 Event bubbling và các thao tác CRUD
33 Demo dự án xử lý API
34 Xử lý mọi loại API trong code của bạn
35 Demo dự án 3 Ứng dụng Thương mại điện tử
36 Xây dựng trang giỏ hàng Thương mại điện tử
37 Bài tập Dự án 3
38 Demo dự án 4 Theo dõi Chi tiêu
39 Ứng dụng theo dõi chi tiêu với local storage và event delegation
40 Demo dự án 5 - Ứng dụng đố vui
41 Xây dựng một ứng dụng đố vui hoàn chỉnh
1 Giới thiệu về Next.js & Tại sao sử dụng Framework?
2 Router trong Next.js là gì, App Router vs Page Router (Nên chọn cái nào?)
3 Cài đặt & Viết Hello world đầu tiên của bạn trong Next.js
4 Next.js vs Chỉ React
5 Phân tích Cấu trúc Thư mục Next.js
1 Quy ước về Thư mục và File trong Next.js
2 Các loại Thư mục & File trong Next.js
3 Nested Routing và Dynamic Routing
4 Mini Project – Tổng quan Dự án & Thiết lập Header
5 Mini-Project- Xây dựng Footer
6 Mini Project – Xây dựng Trang Chủ Responsive
7 Mini-Project - Tạo Trang Giới thiệu Responsive
8 Mini-Project- Tạo Trang Liên hệ Responsive
1 Nested Dynamic Routing
2 Catch All Segment và Optional Catch All Segment
3 Routes Group và Private Folder
4 Intercepting Routes - Cùng cấp và Cao hơn một cấp
5 Intercepting Routes - Cao hơn hai cấp và Cấp gốc
6 Giới thiệu về Parallel Routes và Slots trong Next.js
7 Unmatched Routes và Quy ước Trang Mặc định
8 Tạo Trang Not-Found tùy chỉnh của bạn
1 Server components
2 Client Components và Nên chọn cái nào (Client vs Server)
1 Route Handlers trong Nextjs là gì và GET endpoint trong next.js
2 Tạo POST endpoint trong Next.js
3 Tạo PUT endpoint trong Next.js
4 Tạo PATCH endpoint trong Next.js
5 Tạo DELETE endpoint trong Next.js
6 Khám phá Query Parameter
7 Headers trong Next.js
8 Cookies trong Next.js
9 Ứng dụng Ghi chú – Thiết lập Dự án & Kết nối Cơ sở dữ liệu
10 Ứng dụng Ghi chú – MongoDB Model, Tạo API & Form Thêm Ghi chú
11 Ứng dụng Ghi chú - Lấy & Hiển thị Ghi chú với Cards, useState & Toasts
12 Ứng dụng Ghi chú – Delete Endpoint & Xóa Ghi chú
13 Ứng dụng Ghi chú – Edit Endpoint & Form Chỉnh sửa có điều kiện
1 Caching & Revalidate Dễ dàng - Next.js Extended Fetch API
2 Xử lý lỗi 404 với hàm notFound() trong Next.js
3 Hook useParam
4 Hook usePathname
5 Hook useQueryParams
6 Hook useRouter – push, replace, back & forward, prefetch
7 Hàm Redirect trong Next.js
1 Đi sâu vào Server Actions - Tại sao chúng vượt trội hơn API Routes
2 Thành thạo Fonts trong Next.js - Google & Local dễ dàng
3 Forms trong Next.js - Prefetching, Navigation & Server Actions
4 Hình ảnh được tối ưu trong Next.js với Component Image
5 Next.js & – Vượt xa hơn và
6 Dự án Form Liên hệ – Giới thiệu, Thiết lập & Kết nối Cơ sở dữ liệu
7 Dự án Form Liên hệ – Contact Model, ShadcnUI & Giao diện Form
8 Dự án Form Liên hệ – Tạo Server Action Liên hệ & Tích hợp Form
9 Dự án Form Liên hệ – Lấy Danh sách Liên hệ & Render trong Server Component
10 Dự án Form Liên hệ – Cập nhật Trạng thái Liên hệ & Revalidate Path
11 Dự án Form Liên hệ – Component Trạng thái Liên hệ, unstable_cache & Revalidate Tag
1 Metadata Tĩnh vs Động - Cách thực hành tốt nhất cho Layouts & Pages
2 Đi sâu vào Title Metadata - Giải thích các thuộc tính Mặc định, Template & Absolute
3 Cách Thêm và Cập nhật Favicon trong Dự án Next.js
4 Hình ảnh Open Graph Tĩnh - Nó là gì, Tại sao quan trọng, Ưu & Nhược điểm
5 Hình ảnh Open Graph Động trong Next.js - Xây dựng OG API với nextog
1 Giới thiệu về Tanstack Query và Khởi tạo trong Query provider trong Nextjs App
2 useQuery trong TanStack Query – Đơn giản hóa việc lấy dữ liệu bằng cách loại bỏ mã lặp
3 useMutation trong TanStack Query – Mutations, Query Invalidation và Optimistic UI
4 67. Hydration & Caching trong Next.js là gì - Hướng dẫn nhanh
5 Ứng dụng ToDo – Thiết lập Cơ sở dữ liệu, Schema & Query Provider
6 Ứng dụng ToDo – Thêm công việc với Xác thực Zod & Mutation Hooks
7 Ứng dụng ToDo – Lấy & Hiển thị công việc với Zustand và TanStack Query
8 Ứng dụng ToDo – Đánh dấu công việc đã hoàn thành với Mutations
9 Ứng dụng ToDo – Xóa công việc với Mutations
1 ORM & Prisma trong Next.js: Từ Thiết lập đến Seeding
2 Tạo & Lấy dữ liệu với Prisma ORM
3 Xây dựng Component PostList với Prisma trong Server Components
4 Giới thiệu Drizzle ORM với Next.js & Neon: Thiết lập + User Schema
5 Thao tác CRUD với Drizzle ORM & Next.js Server Actions
6 Tạo giao diện quản lý người dùng: UserList + UserForm sử dụng shadcn và drizzle orm
1 Giới thiệu Xác thực và Phân quyền trong Nextjs
2 Làm chủ Better Auth trong Next.js: Đăng nhập Google & GitHub với ShadCN UI
3 Cấu hình Better Auth DatabaseURL + Google & GitHub Secrets
4 Better Auth trong thực tế: Database Migration, API & Thiết lập Auth Client
5 Giao diện Đăng nhập Better Auth ShadCN + Đăng nhập Google & GitHub
6 Bảo mật Better Auth: Bảo vệ Route, Sessions & Quy trình Đăng xuất
7 Xác thực Clerk trong Next.js: Giới thiệu, Middleware, Hướng dẫn thiết lập Đăng nhập/Đăng ký tùy chỉnh
1 Giới thiệu mô-đun Thanh toán và Hóa đơn cùng Thiết lập Stripe Component
2 Next.js và Stripe: Xây dựng luồng Thanh toán
3 Tích hợp Polar với Next.js và Better Auth
4 Next.js + Razorpay: Tạo đơn hàng và Xác minh thanh toán
1 Giới thiệu và Demo dự án Leetcode
2 Thiết lập dự án - Cài đặt Nextjs và Khởi tạo Shadcn/ui
3 Thiết lập Cơ sở dữ liệu dễ dàng: Khởi tạo Prisma & Cơ sở dữ liệu Docker hóa cho Next.js
4 Xác thực sử dụng Clerk - Thiết lập Clerk, GitHub OAuth & Trang xác thực tùy chỉnh
5 Onboarding người dùng với Prisma - Định nghĩa Schema & Server Actions
6 Xây dựng Navbar & Trang chủ Responsive với Chế độ Sáng/Tối + Phân quyền theo Vai trò
7 Thiết lập Judge0: Tự host cục bộ hoặc Tích hợp đám mây qua RapidAPI
8 Tạo Bài toán: Định nghĩa Prisma Schema & Liên kết với Admin User
9 Tạo Bài toán - Tích hợp Judge0 để Xác thực & Lưu Testcases vào DB
10 Truy cập & Giao diện dựa trên Vai trò cho Form Tạo Bài toán với các Bài toán mẫu
11 Trang Danh sách Bài toán: Lấy tất cả Bài toán với Giao diện Bảng, Bộ lọc & Tìm kiếm
12 Trang Giải Bài toán: Lấy theo ID với Header, Phần Trái/Phải & Bố cục đầy đủ
13 Bài nộp & TestCases: Prisma Schema để Lưu dữ liệu Thực thi
14 Lịch sử Bài nộp: Lấy Bài nộp của người dùng cụ thể & Xây dựng Component Lịch sử
15 Prisma Schema & Backend Endpoints để Tạo Playlist và Thêm Bài toán
16 Tạo Playlist & Thêm Bài toán qua Modal với Xử lý Logic phù hợp
17 Trang Hồ sơ: Lấy Thông tin người dùng, Thống kê, Bài nộp & Playlist
1 Giới thiệu và Demo dự án V0-Clone
2 Thiết lập dự án - Cài đặt Nextjs và Khởi tạo Shadcn/ui
3 Thiết lập Cơ sở dữ liệu dễ dàng: Khởi tạo Prisma & Cơ sở dữ liệu Docker hóa cho Next.js
4 Xác thực sử dụng Clerk - Thiết lập Clerk, GitHub và Google Oauth & Xác thực tùy chỉnh
5 Tạo Header thân thiện với người dùng thay đổi khi Đăng nhập
6 Xây dựng Điểm vào Ứng dụng của bạn: Trang chủ Hiện đại với Mẫu & Form Dự án
7 Hiểu và Triển khai Công việc Nền với Inngest
8 Công việc Nền AI với Inngest
9 Thực hành với E2B Sandboxes - Docker hóa và Chạy ứng dụng Next.js
10 Bộ công cụ Inngest Agents - Thêm File, Terminal & API Tools vào AI Agent của bạn
11 Xây dựng Backend Dự án với Prisma, Server Actions, và Công việc Nền
12 Thêm Component Danh sách Dự án và Xem Dự án với Dynamic Project Route Segment
13 Xây dựng Backend Tin nhắn với Prisma, Công việc Nền với Người dùng và Trợ lý
14 Xây dựng File Explorer & Syntax Highlighting với Tích hợp Sandbox trên Iframe
15 Thiết lập AI Agents - Tạo Tiêu đề & Tóm tắt Phản hồi
16 Trang Giá với Tích hợp Thanh toán và Giới hạn Tốc độ cho Người dùng Miễn phí và Cao cấp
17 Thiết lập Bộ nhớ AI Agent - Lưu trữ Dài hạn với Inngest
1 Giới thiệu và Demo dự án T3-Chat
2 Thiết lập dự án - Cài đặt Nextjs và Khởi tạo Shadcn/ui
3 Thiết lập Cơ sở dữ liệu dễ dàng: Khởi tạo Prisma & Cơ sở dữ liệu Docker hóa cho Next.js
4 Xác thực sử dụng Better-Auth, GitHub & Trang xác thực tùy chỉnh
5 Thiết kế Giao diện Chat tương tác: Sidebar, Header & Chủ đề
6 Triển khai Lựa chọn Mô hình: Openrouter, Lấy Mô hình, và Thiết lập Giao diện
7 Thiết lập Chat End-to-End: Schema Backend, API, và UI Hooks
8 Xây dựng Sidebar Chat: Lấy dữ liệu, Zustand Store, và Thiết kế Component
9 Mục Sidebar Chat Hoạt động: Component Trang & Tin nhắn Động
10 Phát triển API Chat Nâng cao: Streaming, Chuyển đổi Tin nhắn, và Lưu trữ
11 Xây dựng Giao diện Trang Chat: Hiển thị Tin nhắn Động và Kích hoạt Tự động Stream
12 Hoàn thiện Ứng dụng Chat: Tự động kích hoạt Phản hồi Stream & Tổng kết Dự án
1 Giới thiệu và Demo dự án sử dụng Supabase
2 Cài đặt Nextjs và Khởi tạo Shadcn/ui
3 Next.js + Supabase: Quy trình Onboarding Nhà phát triển Tối ưu
4 Làm chủ Xác thực Người dùng: Từ Đăng ký đến Đăng xuất trong Next.js
5 Supabase trong thực tế: Xây dựng Blog Bảo mật với Storage, RLS & Editor.js
6 Route Bảo mật Supabase: Lấy, Hiển thị, và Gỡ lỗi Nội dung Blog
1 Giới thiệu và Demo dự án
2 Convex Quickstart: Thiết lập Next.js + shadcn/ui trong vài phút
3 Tại sao chọn Convex? Làm chủ Tương lai của Phát triển Full-Stack Realtime
4 Convex sẵn sàng cho Người dùng: Xác thực + Component Hồ sơ trong một bước
5 Convex trong thực tế: Schema, Functions, và Giao diện cho Ứng dụng ToDo hoàn chỉnh
1 Giới thiệu Next.js 16 với những cải tiến lớn hiện đã có mặt
2 Tìm hiểu sâu về cacheComponents: Cốt lõi của Mô hình PPR trong Next.js 16
3 Next.js DevTools MCP - Cho phép AI Agents Hiểu ứng dụng của bạn
4 Giải thích Next.js Proxy - Ranh giới Mạng thông minh hơn và Kiểm soát Yêu cầu
1 Lời kết

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

This course is designed for developers who want to master React and Next.js by building real-world, full-stack AI-powered applications. Instead of learning concepts in isolation, you’ll build production-grade projects using modern tools like Convex, Supabase, Drizzle ORM, and secure payment gateways. Each module takes you from fundamentals to deployment, ensuring you understand both how things work and why they work that way.

You’ll start by strengthening your React and Next.js foundations - routing, components, server actions, caching, and performance optimization. Then you’ll move into backend development using Convex and Supabase to create scalable databases, authentication systems, and API layers. You’ll learn relational modeling with Drizzle ORM, manage global state with  Zustand, or Context, and implement real payment flows using industry-standard gateways.

The course includes multiple AI-based projects where you integrate models from OpenAI, Gemini, and other providers to create intelligent SaaS applications. You’ll build dashboards, file-handling systems, chat assistants, automation tools, and more.

Finally, you’ll deploy your applications using modern hosting platforms and learn how to optimize them for real users. This is a complete, hands-on course that gives you the skills needed to build and ship full-stack, AI-driven web apps confidently.


This course is a one stop solution to master React and NextJS so that you can ship your next project with confidence!


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 😊