Đây là khóa nâng cao thật sự. Phần quản lý state, render phía server và tối ưu hiệu năng giúp mình tự tin hơn khi review code trong team. Dự án cửa hàng với giỏ hàng và đăng nhập đưa lên được mạng, mình đưa thẳng vào hồ sơ xin việc.
React & Next.js thực chiến
Xây ứng dụng React và Next.js có đăng nhập, cơ sở dữ liệu và triển khai thật, theo cách đội sản phẩm đang làm.
Giảng viên: Nguyễn Đức Anh · Frontend Tech Lead
Bạn sẽ làm được gì
- Xây component React với props, state, hooks và custom hook tái sử dụng
- Quản lý state bằng Context, Zustand và đồng bộ dữ liệu server với React Query
- Dựng ứng dụng Next.js App Router với Server Component, Server Actions và dynamic route
- Thiết kế cơ sở dữ liệu với Prisma và PostgreSQL, làm CRUD đầy đủ
- Cài đặt đăng nhập, phân quyền và kiểm tra dữ liệu bằng Auth.js và Zod
- Đo và cải thiện Core Web Vitals, viết test và deploy bằng CI/CD lên Vercel
Khóa học dành cho người đã nắm vững JavaScript và HTML/CSS, muốn lên trình độ làm sản phẩm thật với React và Next.js. Nếu bạn đang làm frontend và muốn hiểu Server Component, caching hay xác thực người dùng một cách có hệ thống, đây là khóa phù hợp.
Bạn sẽ đi từ React cốt lõi và hooks, sang Next.js App Router, rồi thêm cơ sở dữ liệu với Prisma, đăng nhập bằng Auth.js, kiểm thử với Testing Library và Playwright, cuối cùng triển khai bằng CI/CD lên Vercel. Mọi thứ dùng TypeScript để code an toàn hơn.
Giảng viên Nguyễn Đức Anh dạy theo cách đội sản phẩm làm việc: chia component, review code, đo hiệu năng và xử lý lỗi sau khi ra mắt. Mỗi chương có một bài tập sản phẩm, riêng dự án cuối là một cửa hàng mini hoàn chỉnh.
Khóa học dành cho
- Lập trình viên frontend muốn lên Next.js và làm full-stack nhẹ
- Người vừa học xong JavaScript nền tảng và cần dự án lớn hơn cho portfolio
- Freelancer muốn nhận các dự án web ứng dụng thay vì chỉ landing page
- Developer WordPress, PHP muốn chuyển sang hệ sinh thái React
Yêu cầu đầu vào
- Nắm vững JavaScript ES6, HTML và CSS (có thể học khóa HTML, CSS & JavaScript nền tảng trước)
- Biết dùng Git và terminal ở mức cơ bản
- Máy tính RAM từ 8GB, cài được Node.js và VS Code
Công cụ sử dụng
ReactNext.jsTypeScriptTailwind CSSPrisma và PostgreSQLVercel
Giáo trình
6 chương · 48 bài học · 34 giờ 0 phút · 3 bài học thử miễn phí
Chương 1: React cốt lõi8 bài · 340 phút
- Vì sao React: component và luồng dữ liệu một chiềuHọc thử35′
- Dựng project bằng Vite và TypeScriptHọc thử40′
- JSX, props và component conHọc thử40′
- State với useState và cập nhật bất biến45′
- Render danh sách, key và render có điều kiện40′
- Xử lý sự kiện và form có kiểm soát45′
- Lifting state up và chia component hợp lý45′
- Bài tập: bảng sản phẩm có lọc và sắp xếp50′
Chương 2: Hooks và quản lý state8 bài · 340 phút
- useEffect và vòng đời component45′
- useRef, useMemo và useCallback đúng lúc45′
- Custom hook tái sử dụng logic40′
- useReducer cho state phức tạp40′
- Context API và khi nào không nên dùng40′
- Zustand quản lý state toàn cục45′
- React Query: cache và đồng bộ dữ liệu server45′
- Bài tập: giỏ hàng với state toàn cục40′
Chương 3: Next.js App Router8 bài · 340 phút
- App Router, layout và routing theo thư mục40′
- Server Component và Client Component45′
- Lấy dữ liệu phía server và caching45′
- Dynamic route và generateStaticParams40′
- Loading, error và streaming UI40′
- Server Actions xử lý form45′
- Metadata, SEO và Open Graph40′
- Bài tập: blog đọc nội dung từ CMS45′
Chương 4: Giao diện và hiệu năng8 bài · 340 phút
- Tailwind CSS và hệ thống thiết kế40′
- Xây thư viện component với shadcn/ui45′
- Responsive và dark mode35′
- Tối ưu ảnh, font với next/image và next/font40′
- Core Web Vitals: đo và cải thiện45′
- Code splitting, lazy loading và Suspense45′
- Accessibility cho component tương tác40′
- Bài tập: cải thiện điểm Lighthouse cho trang chủ50′
Chương 5: Backend và dữ liệu8 bài · 340 phút
- Route Handler tạo API trong Next.js40′
- Thiết kế schema với Prisma và PostgreSQL45′
- CRUD đầy đủ với Prisma45′
- Xác thực người dùng bằng Auth.js45′
- Phân quyền và bảo vệ route bằng middleware40′
- Kiểm tra dữ liệu với Zod35′
- Upload ảnh và lưu trữ file40′
- Bài tập: dashboard quản trị có đăng nhập50′
Chương 6: Kiểm thử, dự án cuối và triển khai8 bài · 340 phút
- Kiểm thử component với Testing Library45′
- Kiểm thử end-to-end với Playwright45′
- Lên kế hoạch dự án cuối khóa30′
- Dựng cửa hàng mini: danh mục và chi tiết sản phẩm50′
- Dựng giỏ hàng và thanh toán giả lập50′
- CI/CD với GitHub Actions40′
- Deploy lên Vercel và quản lý biến môi trường40′
- Theo dõi lỗi, log và bảo trì sau khi ra mắt40′
Dự án thực hành
Bảng sản phẩm và giỏ hàng bằng React
Ứng dụng React TypeScript có lọc, sắp xếp, giỏ hàng toàn cục và đồng bộ dữ liệu bằng React Query.
Dashboard quản trị có đăng nhập
Ứng dụng Next.js với Prisma, Auth.js, phân quyền theo vai trò và kiểm tra dữ liệu bằng Zod.
Cửa hàng mini full-stack
Có danh mục, trang chi tiết, giỏ hàng, thanh toán giả lập, test tự động và đã deploy lên Vercel.
Giảng viên
Nguyễn Đức Anh
Frontend Tech Lead · 9 năm kinh nghiệm
Frontend Tech Lead dạy lập trình web chắc nền tảng, rồi mới lên framework.
Xem hồ sơĐánh giá của học viên
- 5 sao1
- 4 sao0
- 3 sao0
- 2 sao0
- 1 sao0
Chỉ học viên đã hoàn thành khóa mới có thể đánh giá (mô phỏng).
Câu hỏi thường gặp
Tôi truy cập khóa học được bao lâu?
Bạn học không giới hạn thời gian, và khóa được cập nhật khi Next.js có thay đổi lớn. Mã nguồn từng bài đều tải về được để đối chiếu.
Khi bị lỗi build hoặc lỗi cấu hình, ai hỗ trợ?
Bạn đăng câu hỏi kèm đường dẫn repo dưới bài học, giảng viên hoặc trợ giảng phản hồi trong ngày làm việc. Dự án cuối còn được review code chi tiết.
Có chứng chỉ không?
Có, bạn nhận chứng nhận hoàn thành của SKILLUP sau khi học hết giáo trình và nộp dự án cuối. Chứng nhận xác nhận quá trình học, nhà tuyển dụng vẫn sẽ đánh giá chủ yếu qua code của bạn.
Tôi có được hoàn tiền không?
Bạn được hoàn tiền trong 7 ngày kể từ khi mua nếu khóa học chưa phù hợp, với điều kiện chưa học quá 30% nội dung. Hãy liên hệ SKILLUP kèm mã đơn hàng.
Máy tính cần cấu hình thế nào?
Máy RAM 8GB là đủ để chạy Next.js và cơ sở dữ liệu. Nếu máy yếu hơn, bạn có thể dùng cơ sở dữ liệu miễn phí trên cloud theo hướng dẫn trong chương 5.
Bài viết liên quan
Học lập trình web từ đầu: lộ trình thực tế cho người mới
Học lập trình web từ đầu cần học gì trước? Lộ trình thực tế từ HTML, CSS, JavaScript đến React, kèm dự án mẫu cho từng…
