Khoá học Unica, Gitiho, Udemy… chỉ từ 49.000đXem ngay

Khóa học NextJS 14-ReactJS-Typescript thực chiến 2024 PRO

Khóa học NextJS 14-ReactJS-Typescript thực chiến 2024 PRO được thiết kế bởi các chuyên gia giàu kinh nghiệm trong lĩnh vực phát triển web, tập trung vào việc…

41 học viên đã muaĐang sẵn sàngBảo hành link trọn đời

Nội dung chi tiết

Mô tả khoá học

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

Khóa học NextJS 14-ReactJS-Typescript thực chiến 2024 PRO được thiết kế bởi các chuyên gia giàu kinh nghiệm trong lĩnh vực phát triển web, tập trung vào việc cung cấp kiến thức và kỹ năng thực tiễn để bạn có thể xây dựng các ứng dụng web chuyên nghiệp với bộ ba công nghệ mạnh mẽ: Next.js 14, ReactJS và TypeScript. Khóa học không chỉ dừng lại ở lý thuyết mà còn đi sâu vào thực hành, giúp bạn áp dụng kiến thức vào các dự án thực tế.

Lợi ích khi tham gia khóa học

Nắm vững kiến thức nền tảng về Next.js 14, ReactJS và TypeScript: Khóa học sẽ giúp bạn hiểu rõ về các khái niệm cơ bản, cấu trúc dự án, và cách thức hoạt động của ba công nghệ này.
Thành thạo các tính năng mới nhất của Next.js 14: Bạn sẽ được tìm hiểu về App Router, Server Components, Metadata API, và các tính năng khác của Next.js 14.
Xây dựng các ứng dụng web thực tế: Thông qua các dự án thực hành, bạn sẽ được áp dụng kiến thức đã học để xây dựng các ứng dụng web từ đơn giản đến phức tạp.
Tối ưu hóa hiệu suất và trải nghiệm người dùng: Khóa học sẽ hướng dẫn bạn các kỹ thuật tối ưu hóa hiệu suất, cải thiện tốc độ tải trang và trải nghiệm người dùng.
Nâng cao khả năng giải quyết vấn đề và tư duy logic: Bạn sẽ được rèn luyện khả năng tư duy logic, phân tích và giải quyết các vấn đề thường gặp trong quá trình phát triển ứng dụng web.
Nhận chứng chỉ hoàn thành khóa học: Sau khi hoàn thành khóa học, bạn sẽ nhận được chứng chỉ có giá trị, chứng minh năng lực của bạn trong lĩnh vực phát triển web.

Ai phù hợp với khóa học

Lập trình viên Front-end: Muốn nâng cao kỹ năng và kiến thức về Next.js, ReactJS và TypeScript.
Sinh viên CNTT: Muốn tìm hiểu và làm chủ các công nghệ mới nhất trong lĩnh vực phát triển web.
Những người muốn chuyển đổi nghề nghiệp sang lập trình Front-end: Khóa học sẽ cung cấp cho bạn nền tảng vững chắc để bắt đầu sự nghiệp mới.

Thông tin khoá học

Số bài học: 32 bài
Trình độ: Cơ bản đến nâng cao
Thông tin được kiểm tra: tháng 08, 2026

Lộ trình học

Nội dung khóa học

32phần học342 bài giảng

Chương 1: Giới thiệu về dự án3 bài

3 bài

Bài 1: Demo kiến thức đạt được khi kết thúc khóa học
Bài 2: Demo danh sách API trong dự án thực chiến
Bài 3: Demo dự án thực chiến website bán hàng

Chương 2: Những kiến thức JavaScript cần thiết cho khóa học10 bài

10 bài

Bài 1: Biến, kiểu dữ liệu và sự khác nhau giữa let, const, var trong javascript
Bài 2: Toán tử so sánh, câu điều kiện, và kiểu dữ liệu undefined, null
Bài 3: Hàm và tham số trong javascript
Bài 4: Vòng lặp trong javascript
Bài 5: Method array trong javascript
Bài 6: Template literals trong javascript
Bài 7: Destructuring trong javascript
Bài 8: Enhance Object literals
Bài 9: Spread và Rest parameter trong javascript
Bài 10: Tham trị và tham chiếu trong javascript

Chương 3: Tìm hiểu ReactJS21 bài

21 bài

Bài 1: Khởi tạo dự án ReactJS và phân tích structure trong ReactJS
Bài 2: JSX là gì? Hoạt động như nào?
Bài 3: Dom và Virtual Dom là gì?
Bài 4: Import và export trong JavaScript
Bài 5: Styling trong ReactJS
Bài 6: Props và State trong ReactJS
Bài 7: useState trong ReactJS
Bài 8: Thực hành todo list với useState trong reactjs
Bài 9: Thực hành phân chia component và Props
Bài 10: Tìm hiểu useRef? Sự khác nhau giữa useRef và useState?
Bài 11: Tìm hiểu useEffect trong ReactJS
Bài 12: Tìm hiểu useMemo trong ReactJS
Bài 13: memo trong ReactJS
Bài 14: useCallback trong ReactJS
Bài 15: class component trong ReactJS
Bài 16: Lifecycle trong reactJS
Bài 17: Tìm hiểu useContext trong ReactJS
Bài 18: Tìm hiểu useReducer trong Reactjs
Bài 19: Tìm hiểu về react-router-dom V6 trong reactJS
Bài 20: Material UI là gì? Sử dụng nó như nào?
Bài 21: Error boundary trong reactjs

Chương 4: Tìm hiểu typescript2 bài

2 bài

Bài 1: Typescript là gì? Những kiến thức cơ bản về typescript.
Bài 2: Thực hành typescript trong ReactJS

Chương 5: Tìm hiểu về NextJS 14 (App Router)32 bài

32 bài

Bài 1: NextJS là gì? Tại sao phải dùng nó?
Bài 2: Hydrate trong NextJS là gì?
Bài 3: Khởi tạo dự án nextjs 14
Bài 4: Phân tích structure dự án Nextjs 14 (App Router)
Bài 5: React Server component (RSC) là gì? Những thứ cần biết về Nextjs
Bài 6: Routing trong nextjs 14 ( App Router)
Bài 7: Catch all segment in Routing
Bài 8: Not Found Page trong NextJS 14
Bài 9: Custom Not Found page của từng trang
Bài 10: Cách group route lại trong NextJS
Bài 11: Layout trong NextJS (Nested Layout, route group layout)
Bài 12: Metadata trong NextJS 14
Bài 13: Link và navigate trong NextJS 14
Bài 14: Loading UI trong NextJS
Bài 15: Handle Error trong NextJS 14
Bài 16: Parallel Routes
Bài 17: Static side generation (SSG) là gì?
Bài 18: Server Side Rendering (SSR). So sánh SSR vs SSG.
Bài 19: Component Image trong nextjs
Bài 20: Route handlers trong NextJS (Rest API)
Bài 21: GET method trong NextJS 14 (Rest API)
Bài 22: POST method trong NextJS 14 (Rest API)
Bài 23: PATCH method trong NextJS 14 (Rest API)
Bài 24: DELETE method trong NextJS 14 (Rest API)
Bài 25: Redirect trong route handlers
Bài 26: Headers trong route handlers
Bài 27: Cookies trong route handlers
Bài 28: Caching trong route handlers
Bài 29: Middleware trong NextJS 14
Bài 30: Server component và Client Component trong NextJS 14
Bài 31: Lifecycle trong NextJS
Bài 32: Static Rendering trong NextJS

Chương 6: Thực chiến xây dựng trang blog với NextJS 14 trong App Router9 bài

9 bài

Bài 1: Tạo model và connect database trong NextJS
Bài 2: Viết API tạo bài post trong NextJS
Bài 3: Viết API lấy danh sách bài post (phân trang)
Bài 4: Viết API lấy details bài post và cập nhật bài post
Bài 5: Viết API xóa bài post
Bài 6: Fetching data CRUD trong nextjs
Bài 7: Server actions trong nextjs
Bài 8: Xử lý reset form và caching
Bài 9: Có nên sử dụng NextJS viết API và vài điều cần lưu ý.

Chương 7: Setup dự án10 bài

10 bài

Bài 1: Tìm hiểu cơ bản về structure trong template nextjs 14 (Page Router)
Bài 2: Phân tích phần database cho dự án (Mongodb)
Bài 3: Hướng dẫn tạo cơ sở dữ liệu với MongoDB
Bài 4: Hướng dẫn tải và set up projecct ở phía Backend
Bài 5: Tạo tài khoản cho tính năng gửi email cho dự án
Bài 6: Kết nối API ở phía front-end với NEXTJS 14
Bài 7: Hướng dẫn đăng ký tài khoản Vercel
Bài 8: Deploy NextJS 14 lên vercel
Bài 9: Set up CI/CD cho dự án NextJS với Vercel và GitHub Actions
Bài 10: Giải thích phần custom theme trong Material UI

Chương 8: Xây dựng API phần Auth5 bài

5 bài

Bài 1: Giải thích luồng hoạt động khi call API ở BE
Bài 2: API đăng ký người dùng
Bài 3: Json web token là gì?
Bài 4: API đăng nhập
Bài 5: API đăng suất

Chương 9: Login, Logout, phân quyền trong NextJS 14, Dark Mode với MUI, đa ngôn ngữ30 bài

30 bài

Bài 1: Tạo custom component text field cho dự án
Bài 2: Xây dựng UI Login Page (Dùng Yup, use-hook-form để validate trong form)
Bài 3: Hoàn thành UI trang Login
Bài 4: Xây dựng và hoàn thiện UI trang Register
Bài 5: Tổng quan về luồng login, register
Bài 6: Luồng hoạt động của phần auth ở API
Bài 7: Integrate api login cơ bản
Bài 8: Xây dựng layout cơ bản cho dự án
Bài 9: Custom BlankLayout cho dự án
Bài 10: Custom navigation vertical cơ bản
Bài 11: Hướng dẫn dùng kỹ thuật recursive để xử lý navigation vertical
Bài 12: Hoàn thành layout cho dự án
Bài 13: Xử lý sau khi login thành công
Bài 14: Improvement lại luồng login, logout
Bài 15: Xử lý luồng AuthGuard, GuestGuard cho dự án
Bài 16: Interceptor trong Nextjs 14
Bài 17: Dark mode trong Nextjs 14 với Material UI
Bài 18: Đa ngôn ngữ với react-i18next trong Nextjs 14
Bài 19: Phân quyền cho dự án trong Nextjs 14 (Phân quyền phần 1)
Bài 20: Cải thiện luồng login và tạo route cho trang my profile
Bài 21: Tạo UI cho trang my profile (P1)
Bài 22: Hoàn thiện UI cho trang my profile
Bài 23: Tích hợp Redux toolkit - Redux Thunk - Hoàn thiện luồng register
Bài 24: Phân tích luồng phân quyền ở API
Bài 25: Tích hợp api ở my profile (xử lý base64)
Bài 26: Xử lý phân tách chuỗi cho fullName và cải thiện UI User Dropdown
Bài 27: Custom component loading
Bài 28: Improve luồng login và hoàn thành tính năng thay đổi mật khẩu
Bài 29: Xây dựng cơ chế nhớ mật khẩu
Bài 30: Tạo custom component select

Chương 10: Xây dựng phần bố cục cho quản trị hệ thống5 bài

5 bài

Bài 1: Dựng base cho phần menu của quản trị hệ thống
Bài 2: Hoàn thiện UI cho thanh menu
Bài 3: Improve UI cho thành menu
Bài 4: Tạo Custom Modal cho dự án
Bài 5: Tạo custom data grid

Chương 11: Nhóm vai trò, xử lý phân quyền cho user17 bài

17 bài

Bài 1: Xử lý layout ở hệ thống và interage api cơ bản cho nhóm vai trò
Bài 2: Xây dựng UI cho trang quản lý nhóm vai trò
Bài 3: Interage api tạo nhóm vai trò
Bài 4: Hoàn thành interage API CRUD cho nhóm vai trò
Bài 5: Tích hợp search, order list với grid data trong nhóm vai trò
Bài 6: Custom confirmation dialog component
Bài 7: Improve cho dự án
Bài 8: Xử lý thông báo của api với type error từ api
Bài 9: Xây dựng UI cho bảng phân quyền
Bài 10: Giải thích về luồng phân quyền ở API
Bài 11: Xử lý bảng phân quyền cho nhóm vai trò (P1)
Bài 12: Xử lý sự kiện group cho bảng phân quyền cho nhóm vai trò
Bài 13: Hoàn thiện quản lý nhóm vai trò
Bài 14: Xử lý phân quyền ở các trang trong hệ thống
Bài 15: Xử lý phân quyền ở thanh menu
Bài 16: Custom hook xử lý phân quyền
Bài 17: Giải thích lại về authGuard, guestGuard, AclGuard (Phân quyền P2)

Chương 12: Quản trị người dùng9 bài

9 bài

Bài 1: Xây dựng UI cho trang quản trị người dùng
Bài 2: Xây dựng UI tạo, edit người dùng
Bài 3: Intergrate API tạo người dùng
Bài 4: Interate API edit người dùng
Bài 5: Interate API xóa người dùng và xử lý đồng bộ tài khoản của tôi và user dropdown
Bài 6: Custom Table Header cho xử lý actions multiple
Bài 7: Interate xóa multiple danh sách người dùng
Bài 8: Xử lý phân trang, search, sort danh sách người dùng
Bài 9: Hoàn thành quản lí người dùng

Chương 13: Quản lý cài đặt7 bài

7 bài

Bài 1: Khai báo service và slice cho cài đặt city
Bài 2: Hoàn thành settings thành phố
Bài 3: Khai báo service và slice cho cài đặt phương thức giao hàng
Bài 4: Hoàn thành quản trị phương thức giao hàng
Bài 5: Hoàn thành quản trị phương thức thanh toán
Bài 6: Refactor phần quản trị settings
Bài 7: Apply list cities và xử lý filter multiple select

Chương 14: Quản trị sản phẩm10 bài

10 bài

Bài 1: Hoàn thành quản trị loại sản phẩm
Bài 2: Xử lý slug của product type và refactor phân quyền của sản phẩm
Bài 3: Set up service và redux cho quản trị sản phẩm
Bài 4: Set cho quản trị sản phẩm và refactor error từ api
Bài 5: Xử lý UI cho popup tạo sản phẩm
Bài 6: Tạo custom date picker component
Bài 7: Tạo custom component Editor
Bài 8: Xử lý validate ngày giảm giá trong tạo sản phẩm
Bài 9: Xử lý CREATE,EDIT sản phẩm
Bài 10: Hoàn thành quản trị sản phẩm

Chương 15: Danh sách sản phẩm ở trang HOME25 bài

25 bài

Bài 1: Phân tích về sự khác nhau giữa SSR và CSR
Bài 2: Xử lý UI cho card sản phẩm
Bài 3: Interate API cho danh sách sản phẩm và chỉnh sửa UI cho trang list product
Bài 4: Xử lý bộ lọc, filter, phân trang cho danh sách sản phẩm
Bài 5: Tạo UI cho trang chi tiết sản phẩm
Bài 6: Impove UI và và fix lỗi ngày giảm giá của sản phẩm
Bài 7: Xử lý thêm sản phẩm vào giỏ hàng (P1)
Bài 8: Xử lý việc lưu giỏ hàng theo từng user và improve api list sản phẩm
Bài 9: Cập nhật những thay đổi ở API và xử lý popup giỏ hàng
Bài 10: Xây dựng UI cho trang giỏ hàng
Bài 11: Xử lý logic cho trang giỏ hàng
Bài 12: Xử lý thời gian hết hàng và tạo component no data
Bài 13: Improve UI cho trang chi tiết sản phẩm và xử lý layout cho trang details
Bài 14: Xử lý danh sách sản phẩm liên quan ở trang chi tiết sản phẩm
Bài 15: Thích, bỏ thích sản phẩm
Bài 16: Sản phẩm của tôi (đã thích, đã xem)
Bài 17: Xử lý sản phẩm đã xem và refactor luồng authentication của user
Bài 18: Xây dựng UI cho trang mua hàng
Bài 19: Interate API đặt hàng sản phẩm (P1)
Bài 20: Xử lý địa chỉ giao hàng (P1)
Bài 21: Xử ký logic địa chỉ giao hàng (P2)
Bài 22: Hoàn thành xử lý địa chỉ mặc định giao hàng
Bài 23: Xử lý sản thông tin đặt hàng với router trong nextjs
Bài 24: Xử lý giỏ hàng sau khi mua hàng thành công
Bài 25: Xử lý mua hàng cho sản phẩm

Chương 16: Quản trị đơn hàng, đơn hàng của tôi10 bài

10 bài

Bài 1: Xử lý danh sách đơn hàng của tôi
Bài 2: Xử lý filter theo trạng thái và phân trang trong danh sách đơn hàng
Bài 3: Xử lý hủy đơn hàng trong đơn hàng của tôi
Bài 4: Xử lý mua lại sản phẩm trong đơn hàng của tôi (P1)
Bài 5: Hoàn thành mua lại sản phẩm
Bài 6: Fix bug những vấn đề tồn động khi mua lại đơn hàng
Bài 7: Xây dựng trang chi đơn hàng
Bài 8: Fix bug trang chi tiết đơn hàng và setup cho phần quản trị đơn hàng ở CM
Bài 9: Xây dựng trang quản lí đơn hàng (Danh sách + filter)
Bài 10: Hoàn thành quản trị đơn hàng

Chương 17: Quản lý đánh giá sản phẩm5 bài

5 bài

Bài 1: Fix bug đơn hàng và setup review
Bài 2: Hoàn thành quản trị đánh giá ở CMS
Bài 3: Viết đánh giá cho sản phẩm
Bài 4: Hoàn thành danh sách đánh giá của chi tiết sản phẩm
Bài 5: Hoàn thiện luồng phân quyền cho hệ thống

Chương 18: Tích hợp phương thức thanh toán (Stripe)6 bài

6 bài

Bài 1: Hướng dẫn đăng ký tài khoản test VNPAY
Bài 2: Phân tích luồng xử lý ở API
Bài 3: Xử lý phần UI cho thanh toán VNPAY
Bài 4: Tích hợp API thanh toán VN PAY
Bài 5: Hoàn thiện phần thanh toán trong đơn hàng
Bài 6: Hoàn thành việc tự động mở trang thanh toán khi đặt hàng

Chương 19: Thực chiến Next-Auth với Google va Facebook, Quên mật khẩu11 bài

11 bài

Bài 1: Tạo config cho phần OAuth google
Bài 2: Giải thích luồng OAuth ở phía FE VÀ BE
Bài 3: Setup next auth trong nextjs
Bài 4: Xử lý đăng nhập, đăng ký với Google (OAuth)
Bài 5: Giải quyết những vấn đề tồn động của phần OAuth với google
Bài 6: Setup config cho next auth với facebook
Bài 7: Xử lý đăng nhập, đăng ký với facebook (OAuth)
Bài 8: Giải quyết vấn đề tồn động của đăng nhập google, facebook
Bài 9: Phân tích và xây dựng UI cho tính năng quên mật khẩu
Bài 10: Hoàn thành tính năng quên mật khẩu
Bài 11: Improve lại danh sách sản phẩm ở trang HOME

Chương 20: Server side rendering trong page router6 bài

6 bài

Bài 1: Server site generation với getStaticProps trong page router
Bài 2: Dynamic SSG với getStaticPaths trong page router
Bài 3: Tìm hiểu về fallback trong getStaticPaths
Bài 4: Phân tích vấn của static site generation
Bài 5: Incremental static regeneration trong NextJS (ISR)
Bài 6: getServerSideProps trong page Router

Chương 21: Deploy, Improve UI cho trang Home4 bài

4 bài

Bài 1: Hướng dẫn deploy API
Bài 2: Giải quyết vấn đề tồn động khi deploy FE và API
Bài 3: Xử lý Skeleton cho danh sách sản phẩm
Bài 4: Xử ký Carousel cho danh sách review trang chi tiết sản phẩm

Chương 22: Bình luận sản phẩm, Quản trị bình luận (Socket.io)10 bài

10 bài

Bài 1: Setup những thay đổi về quyền cho phần bình luận
Bài 2: Phân tích về phần bình luận ở API
Bài 3: Hoàn thành quản trị bình luận ở CMS
Bài 4: Xây dựng component bình luận
Bài 5: Xử dụng đệ quy để show ra danh sách bình luận
Bài 6: Intergrate API bình luận với trả lời bình luận sản phẩm
Bài 7: Chỉnh sửa và xóa bình luận của tôi
Bài 8: Sử dụng socket io để bình luận real time
Bài 9: Hoàn thành bình luận realtime với socket io
Bài 10: Improve trang details sản phẩm

Chương 23: Phần báo cáo, dashboard12 bài

12 bài

Bài 1: Phân tích API ở phần report
Bài 2: Thống kê số lượng user theo từng loại
Bài 3: Bổ sung bộ lọc loại user cho danh sách người dùng
Bài 4: Thống kê số lượng sản phẩm theo trạng thái
Bài 5: Thống kê số lượng từng model trong hệ thống
Bài 6: Thống kê số lượng sản phẩm theo từng loại sản phẩm
Bài 7: Thống kê doanh thu đơn hàng
Bài 8: Thống kê số lượng đơn hàng theo trạng thái
Bài 9: Vẽ piechart cho phần thống kê người dùng, đơn hàng theo trạng thái
Bài 10: Lấy danh sách sản phẩm phổ biến nhất
Bài 11: Fix bug socket và next auth khi deploy
Bài 12: Fix bug phần danh sách bình luận (trùng user name)

Chương 24: Push notificattion với firebase9 bài

9 bài

Bài 1: Hướng dẫn setup firebase ở client và API
Bài 2: Nhận notification từ firebase trong nextjs
Bài 3: Phân tích luồng hoạt động của notification ở API và test thử với client
Bài 4: Xây dụng UI phần notication và setup services
Bài 5: Integrate API notification phần 1
Bài 6: Hoàn thành intgrate API notification
Bài 7: Infinite scroll với danh sách notification
Bài 8: Integrate luồng push notification với firebase
Bài 9: Improve config cho notification

Chương 25: Fix bug và improve dự án9 bài

9 bài

Bài 1: Refactor luồng cập nhật status đơn hàng và fix bug phân trang
Bài 2: Fix bug đặt đơn hàng khi thanh toán vn pay
Bài 3: Hoàn thiện việc tính số lượng lượt xem, người xem cho sản phẩm
Bài 4: Tích hợp chatbot AI vào website
Bài 5: Fix bug tồn động và hoàn thiện trang HOME
Bài 6: Update translate và improve UI
Bài 7: Fix bug không tăng số lượng sản phẩm trong giỏ hàng, đặt hàng lỗi
Bài 8: Xây dựng UI cho trang 401, 500, 404
Bài 9: Update device token khi fcm thay đổi như nào?

Chương 26: SEO cho website7 bài

7 bài

Bài 1: SEO là gì?
Bài 2: Chia sẻ cách phân trang khi SSR
Bài 3: Xử lý server side rendering kết hợp với client side rendering
Bài 4: Xử lý SSR cho trang chi tiết sản phẩm
Bài 5: Tối ưu SEO với thẻ meta
Bài 6: Add sitemap cho website
Bài 7: Add robots.txt cho website để làm gì?

Chương 27: React query - TanStack Query v513 bài

13 bài

Bài 1: React query là gì?
Bài 2: Những khái niệm cần nắm trong React Query
Bài 3: Setup React query trong NextJS (Page Router)
Bài 4: useQuery và những option cơ bản trong React Query
Bài 5: Tìm hiểu về staletime trong react query
Bài 6: Tìm hiểu về cacheTime(gcTime)
Bài 7: Áp dụng useQuery vào dự án
Bài 8: Query by id trong react query
Bài 9: useMutation trong tankstack query
Bài 10: Tối ưu performce trong react query
Bài 11: Custom useQuery trong react query
Bài 12: Custom hook useMutation trong react query
Bài 13: Tổng kết chương React Query V5

Chương 28: Clean code, improve performance5 bài

5 bài

Bài 1: Tối ưu custom axios
Bài 2: Hướng dẫn tôi ưu code tránh tính trạng re-render không cần thiết
Bài 3: Xử lý request interceptor trong hàng đợi
Bài 4: Improve việc call api ở quản lí người dùng
Bài 5: Improve việc call API ở tất cả danh sách quản trị

Chương 29: Convert dự án từ page router sang app router17 bài

17 bài

Bài 1: Khởi tạo dự án app router để chuẩn bị convert
Bài 2: Convert package từ page router sang app router
Bài 3: Thiết lập đa ngôn ngữ trong app router
Bài 4: Convert phần auth cho dự án
Bài 5: Convert component, layout, configs
Bài 6: Convert theme, react query, redux trong app router
Bài 7: Convert router từ page router sang app router
Bài 8: Hướng dẫn convert xử lý layout và guard cho từng trang
Bài 9: Xử lý lỗi notfound cho từng trang
Bài 10: Xử lý server side rendering trong app router
Bài 11: Convert path name trong app router
Bài 12: Xử lý đa ngôn ngữ trên router
Bài 13: Xử lý next auth trong app router với route handle
Bài 14: Update router trong app router và deploy website
Bài 15: Config next auth khi deploy
Bài 16: Tìm hiểu về Route Segment Config và xử lý việc ko hiển thị khi deployed
Bài 17: SEO, open graph trong app router

Chương 30: Storybook7 bài

7 bài

Bài 1: Tìm hiểu về storybook và setup vào dự án
Bài 2: Tìm hiểu về cách sử dụng storybook
Bài 3: Viết storybook cho component Icon
Bài 4: Viết storybook cho inputSearch component
Bài 5: Viết storybook cho component text field
Bài 6: Storybook cho component select (P1)
Bài 7: Hoàn thành chương storybook

Chương 31: Testing (Jest)15 bài

15 bài

Bài 1: Giới thiệu về jest và cài đặt các thư viện cần thiết
Bài 2: Viết lệnh test case đầu tiền với jest
Bài 3: Tìm hiểu matchers Truthiness
Bài 4: Matchers number
Bài 5: Matchers string và array
Bài 6: Exception matchers
Bài 7: Repeating Setup
Bài 8: Thực chiến viết test case đầu tiên với JEST
Bài 9: Những cách lấy element trong testing
Bài 10: Custom render trong NextJS App Router (Jest)
Bài 11: Hoàn Thành việc custom render trong Jest
Bài 12: Viết test case cho form đơn giản trong jest
Bài 13: Viết testcase cho tính năng đăng nhập
Bài 14: Viết testcase với login google trong jest
Bài 15: Hướng dẫn kĩ thuật mock useRouter trong jest

Chương 32: Interview1 bài

1 bài

Bài 1: Buổi Phỏng Vấn số ReactJS level Fresher

Gợi ý

Khoá học liên quan

Xem tất cả

−90%

Lập trình Web & Full-stack

ReactJS Super: Shopee Clone TypeScript

62 học viên

199.000 ₫1.990.000 ₫

Xem chi tiết

−97%

Lập trình Web & Full-stack

The Complete 2024 Web Development Bootcamp

34 học viên

50.000 ₫1.990.000 ₫

Xem chi tiết

−82%

Lập trình Web & Full-stack

Lập Trình NodeJs Super – Dự Án Twitter API

28 học viên

289.000 ₫1.590.000 ₫

Xem chi tiết

−94%

Lập trình Web & Full-stack

Combo 4 khoá học về NodeJS - Zendvn (Mới)

26 học viên

299.000 ₫4.800.000 ₫

Xem chi tiết

Lập trình Web & Full-stack

Khóa học NextJS 14-ReactJS-Typescript thực chiến 2024 PRO

Khóa học NextJS 14-ReactJS-Typescript thực chiến 2024 PRO được thiết kế bởi các chuyên gia giàu kinh nghiệm trong lĩnh vực phát triển web, tập trung vào việc…

41 học viên đã muaĐang sẵn sàngBảo hành link trọn đời

Nội dung chi tiết

Mô tả khoá học

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

Lợi ích khi tham gia khóa học

Nắm vững kiến thức nền tảng về Next.js 14, ReactJS và TypeScript: Khóa học sẽ giúp bạn hiểu rõ về các khái niệm cơ bản, cấu trúc dự án, và cách thức hoạt động của ba công nghệ này.
Thành thạo các tính năng mới nhất của Next.js 14: Bạn sẽ được tìm hiểu về App Router, Server Components, Metadata API, và các tính năng khác của Next.js 14.
Xây dựng các ứng dụng web thực tế: Thông qua các dự án thực hành, bạn sẽ được áp dụng kiến thức đã học để xây dựng các ứng dụng web từ đơn giản đến phức tạp.
Tối ưu hóa hiệu suất và trải nghiệm người dùng: Khóa học sẽ hướng dẫn bạn các kỹ thuật tối ưu hóa hiệu suất, cải thiện tốc độ tải trang và trải nghiệm người dùng.
Nâng cao khả năng giải quyết vấn đề và tư duy logic: Bạn sẽ được rèn luyện khả năng tư duy logic, phân tích và giải quyết các vấn đề thường gặp trong quá trình phát triển ứng dụng web.
Nhận chứng chỉ hoàn thành khóa học: Sau khi hoàn thành khóa học, bạn sẽ nhận được chứng chỉ có giá trị, chứng minh năng lực của bạn trong lĩnh vực phát triển web.

Ai phù hợp với khóa học

Lập trình viên Front-end: Muốn nâng cao kỹ năng và kiến thức về Next.js, ReactJS và TypeScript.
Sinh viên CNTT: Muốn tìm hiểu và làm chủ các công nghệ mới nhất trong lĩnh vực phát triển web.
Những người muốn chuyển đổi nghề nghiệp sang lập trình Front-end: Khóa học sẽ cung cấp cho bạn nền tảng vững chắc để bắt đầu sự nghiệp mới.

Thông tin khoá học

Số bài học: 32 bài
Trình độ: Cơ bản đến nâng cao
Thông tin được kiểm tra: tháng 08, 2026

Lộ trình học

Nội dung khóa học

32phần học342 bài giảng

Chương 1: Giới thiệu về dự án3 bài

3 bài

Bài 1: Demo kiến thức đạt được khi kết thúc khóa học
Bài 2: Demo danh sách API trong dự án thực chiến
Bài 3: Demo dự án thực chiến website bán hàng

Chương 2: Những kiến thức JavaScript cần thiết cho khóa học10 bài

10 bài

Bài 1: Biến, kiểu dữ liệu và sự khác nhau giữa let, const, var trong javascript
Bài 2: Toán tử so sánh, câu điều kiện, và kiểu dữ liệu undefined, null
Bài 3: Hàm và tham số trong javascript
Bài 4: Vòng lặp trong javascript
Bài 5: Method array trong javascript
Bài 6: Template literals trong javascript
Bài 7: Destructuring trong javascript
Bài 8: Enhance Object literals
Bài 9: Spread và Rest parameter trong javascript
Bài 10: Tham trị và tham chiếu trong javascript

Chương 3: Tìm hiểu ReactJS21 bài

21 bài

Bài 1: Khởi tạo dự án ReactJS và phân tích structure trong ReactJS
Bài 2: JSX là gì? Hoạt động như nào?
Bài 3: Dom và Virtual Dom là gì?
Bài 4: Import và export trong JavaScript
Bài 5: Styling trong ReactJS
Bài 6: Props và State trong ReactJS
Bài 7: useState trong ReactJS
Bài 8: Thực hành todo list với useState trong reactjs
Bài 9: Thực hành phân chia component và Props
Bài 10: Tìm hiểu useRef? Sự khác nhau giữa useRef và useState?
Bài 11: Tìm hiểu useEffect trong ReactJS
Bài 12: Tìm hiểu useMemo trong ReactJS
Bài 13: memo trong ReactJS
Bài 14: useCallback trong ReactJS
Bài 15: class component trong ReactJS
Bài 16: Lifecycle trong reactJS
Bài 17: Tìm hiểu useContext trong ReactJS
Bài 18: Tìm hiểu useReducer trong Reactjs
Bài 19: Tìm hiểu về react-router-dom V6 trong reactJS
Bài 20: Material UI là gì? Sử dụng nó như nào?
Bài 21: Error boundary trong reactjs

Chương 4: Tìm hiểu typescript2 bài

2 bài

Bài 1: Typescript là gì? Những kiến thức cơ bản về typescript.
Bài 2: Thực hành typescript trong ReactJS

Chương 5: Tìm hiểu về NextJS 14 (App Router)32 bài

32 bài

Bài 1: NextJS là gì? Tại sao phải dùng nó?
Bài 2: Hydrate trong NextJS là gì?
Bài 3: Khởi tạo dự án nextjs 14
Bài 4: Phân tích structure dự án Nextjs 14 (App Router)
Bài 5: React Server component (RSC) là gì? Những thứ cần biết về Nextjs
Bài 6: Routing trong nextjs 14 ( App Router)
Bài 7: Catch all segment in Routing
Bài 8: Not Found Page trong NextJS 14
Bài 9: Custom Not Found page của từng trang
Bài 10: Cách group route lại trong NextJS
Bài 11: Layout trong NextJS (Nested Layout, route group layout)
Bài 12: Metadata trong NextJS 14
Bài 13: Link và navigate trong NextJS 14
Bài 14: Loading UI trong NextJS
Bài 15: Handle Error trong NextJS 14
Bài 16: Parallel Routes
Bài 17: Static side generation (SSG) là gì?
Bài 18: Server Side Rendering (SSR). So sánh SSR vs SSG.
Bài 19: Component Image trong nextjs
Bài 20: Route handlers trong NextJS (Rest API)
Bài 21: GET method trong NextJS 14 (Rest API)
Bài 22: POST method trong NextJS 14 (Rest API)
Bài 23: PATCH method trong NextJS 14 (Rest API)
Bài 24: DELETE method trong NextJS 14 (Rest API)
Bài 25: Redirect trong route handlers
Bài 26: Headers trong route handlers
Bài 27: Cookies trong route handlers
Bài 28: Caching trong route handlers
Bài 29: Middleware trong NextJS 14
Bài 30: Server component và Client Component trong NextJS 14
Bài 31: Lifecycle trong NextJS
Bài 32: Static Rendering trong NextJS

Chương 6: Thực chiến xây dựng trang blog với NextJS 14 trong App Router9 bài

9 bài

Bài 1: Tạo model và connect database trong NextJS
Bài 2: Viết API tạo bài post trong NextJS
Bài 3: Viết API lấy danh sách bài post (phân trang)
Bài 4: Viết API lấy details bài post và cập nhật bài post
Bài 5: Viết API xóa bài post
Bài 6: Fetching data CRUD trong nextjs
Bài 7: Server actions trong nextjs
Bài 8: Xử lý reset form và caching
Bài 9: Có nên sử dụng NextJS viết API và vài điều cần lưu ý.

Chương 7: Setup dự án10 bài

10 bài

Bài 1: Tìm hiểu cơ bản về structure trong template nextjs 14 (Page Router)
Bài 2: Phân tích phần database cho dự án (Mongodb)
Bài 3: Hướng dẫn tạo cơ sở dữ liệu với MongoDB
Bài 4: Hướng dẫn tải và set up projecct ở phía Backend
Bài 5: Tạo tài khoản cho tính năng gửi email cho dự án
Bài 6: Kết nối API ở phía front-end với NEXTJS 14
Bài 7: Hướng dẫn đăng ký tài khoản Vercel
Bài 8: Deploy NextJS 14 lên vercel
Bài 9: Set up CI/CD cho dự án NextJS với Vercel và GitHub Actions
Bài 10: Giải thích phần custom theme trong Material UI

Chương 8: Xây dựng API phần Auth5 bài

5 bài

Bài 1: Giải thích luồng hoạt động khi call API ở BE
Bài 2: API đăng ký người dùng
Bài 3: Json web token là gì?
Bài 4: API đăng nhập
Bài 5: API đăng suất

Chương 9: Login, Logout, phân quyền trong NextJS 14, Dark Mode với MUI, đa ngôn ngữ30 bài

30 bài

Bài 1: Tạo custom component text field cho dự án
Bài 2: Xây dựng UI Login Page (Dùng Yup, use-hook-form để validate trong form)
Bài 3: Hoàn thành UI trang Login
Bài 4: Xây dựng và hoàn thiện UI trang Register
Bài 5: Tổng quan về luồng login, register
Bài 6: Luồng hoạt động của phần auth ở API
Bài 7: Integrate api login cơ bản
Bài 8: Xây dựng layout cơ bản cho dự án
Bài 9: Custom BlankLayout cho dự án
Bài 10: Custom navigation vertical cơ bản
Bài 11: Hướng dẫn dùng kỹ thuật recursive để xử lý navigation vertical
Bài 12: Hoàn thành layout cho dự án
Bài 13: Xử lý sau khi login thành công
Bài 14: Improvement lại luồng login, logout
Bài 15: Xử lý luồng AuthGuard, GuestGuard cho dự án
Bài 16: Interceptor trong Nextjs 14
Bài 17: Dark mode trong Nextjs 14 với Material UI
Bài 18: Đa ngôn ngữ với react-i18next trong Nextjs 14
Bài 19: Phân quyền cho dự án trong Nextjs 14 (Phân quyền phần 1)
Bài 20: Cải thiện luồng login và tạo route cho trang my profile
Bài 21: Tạo UI cho trang my profile (P1)
Bài 22: Hoàn thiện UI cho trang my profile
Bài 23: Tích hợp Redux toolkit - Redux Thunk - Hoàn thiện luồng register
Bài 24: Phân tích luồng phân quyền ở API
Bài 25: Tích hợp api ở my profile (xử lý base64)
Bài 26: Xử lý phân tách chuỗi cho fullName và cải thiện UI User Dropdown
Bài 27: Custom component loading
Bài 28: Improve luồng login và hoàn thành tính năng thay đổi mật khẩu
Bài 29: Xây dựng cơ chế nhớ mật khẩu
Bài 30: Tạo custom component select

Chương 10: Xây dựng phần bố cục cho quản trị hệ thống5 bài

5 bài

Bài 1: Dựng base cho phần menu của quản trị hệ thống
Bài 2: Hoàn thiện UI cho thanh menu
Bài 3: Improve UI cho thành menu
Bài 4: Tạo Custom Modal cho dự án
Bài 5: Tạo custom data grid

Chương 11: Nhóm vai trò, xử lý phân quyền cho user17 bài

17 bài

Bài 1: Xử lý layout ở hệ thống và interage api cơ bản cho nhóm vai trò
Bài 2: Xây dựng UI cho trang quản lý nhóm vai trò
Bài 3: Interage api tạo nhóm vai trò
Bài 4: Hoàn thành interage API CRUD cho nhóm vai trò
Bài 5: Tích hợp search, order list với grid data trong nhóm vai trò
Bài 6: Custom confirmation dialog component
Bài 7: Improve cho dự án
Bài 8: Xử lý thông báo của api với type error từ api
Bài 9: Xây dựng UI cho bảng phân quyền
Bài 10: Giải thích về luồng phân quyền ở API
Bài 11: Xử lý bảng phân quyền cho nhóm vai trò (P1)
Bài 12: Xử lý sự kiện group cho bảng phân quyền cho nhóm vai trò
Bài 13: Hoàn thiện quản lý nhóm vai trò
Bài 14: Xử lý phân quyền ở các trang trong hệ thống
Bài 15: Xử lý phân quyền ở thanh menu
Bài 16: Custom hook xử lý phân quyền
Bài 17: Giải thích lại về authGuard, guestGuard, AclGuard (Phân quyền P2)

Chương 12: Quản trị người dùng9 bài

9 bài

Bài 1: Xây dựng UI cho trang quản trị người dùng
Bài 2: Xây dựng UI tạo, edit người dùng
Bài 3: Intergrate API tạo người dùng
Bài 4: Interate API edit người dùng
Bài 5: Interate API xóa người dùng và xử lý đồng bộ tài khoản của tôi và user dropdown
Bài 6: Custom Table Header cho xử lý actions multiple
Bài 7: Interate xóa multiple danh sách người dùng
Bài 8: Xử lý phân trang, search, sort danh sách người dùng
Bài 9: Hoàn thành quản lí người dùng

Chương 13: Quản lý cài đặt7 bài

7 bài

Bài 1: Khai báo service và slice cho cài đặt city
Bài 2: Hoàn thành settings thành phố
Bài 3: Khai báo service và slice cho cài đặt phương thức giao hàng
Bài 4: Hoàn thành quản trị phương thức giao hàng
Bài 5: Hoàn thành quản trị phương thức thanh toán
Bài 6: Refactor phần quản trị settings
Bài 7: Apply list cities và xử lý filter multiple select

Chương 14: Quản trị sản phẩm10 bài

10 bài

Bài 1: Hoàn thành quản trị loại sản phẩm
Bài 2: Xử lý slug của product type và refactor phân quyền của sản phẩm
Bài 3: Set up service và redux cho quản trị sản phẩm
Bài 4: Set cho quản trị sản phẩm và refactor error từ api
Bài 5: Xử lý UI cho popup tạo sản phẩm
Bài 6: Tạo custom date picker component
Bài 7: Tạo custom component Editor
Bài 8: Xử lý validate ngày giảm giá trong tạo sản phẩm
Bài 9: Xử lý CREATE,EDIT sản phẩm
Bài 10: Hoàn thành quản trị sản phẩm

Chương 15: Danh sách sản phẩm ở trang HOME25 bài

25 bài

Bài 1: Phân tích về sự khác nhau giữa SSR và CSR
Bài 2: Xử lý UI cho card sản phẩm
Bài 3: Interate API cho danh sách sản phẩm và chỉnh sửa UI cho trang list product
Bài 4: Xử lý bộ lọc, filter, phân trang cho danh sách sản phẩm
Bài 5: Tạo UI cho trang chi tiết sản phẩm
Bài 6: Impove UI và và fix lỗi ngày giảm giá của sản phẩm
Bài 7: Xử lý thêm sản phẩm vào giỏ hàng (P1)
Bài 8: Xử lý việc lưu giỏ hàng theo từng user và improve api list sản phẩm
Bài 9: Cập nhật những thay đổi ở API và xử lý popup giỏ hàng
Bài 10: Xây dựng UI cho trang giỏ hàng
Bài 11: Xử lý logic cho trang giỏ hàng
Bài 12: Xử lý thời gian hết hàng và tạo component no data
Bài 13: Improve UI cho trang chi tiết sản phẩm và xử lý layout cho trang details
Bài 14: Xử lý danh sách sản phẩm liên quan ở trang chi tiết sản phẩm
Bài 15: Thích, bỏ thích sản phẩm
Bài 16: Sản phẩm của tôi (đã thích, đã xem)
Bài 17: Xử lý sản phẩm đã xem và refactor luồng authentication của user
Bài 18: Xây dựng UI cho trang mua hàng
Bài 19: Interate API đặt hàng sản phẩm (P1)
Bài 20: Xử lý địa chỉ giao hàng (P1)
Bài 21: Xử ký logic địa chỉ giao hàng (P2)
Bài 22: Hoàn thành xử lý địa chỉ mặc định giao hàng
Bài 23: Xử lý sản thông tin đặt hàng với router trong nextjs
Bài 24: Xử lý giỏ hàng sau khi mua hàng thành công
Bài 25: Xử lý mua hàng cho sản phẩm

Chương 16: Quản trị đơn hàng, đơn hàng của tôi10 bài

10 bài

Bài 1: Xử lý danh sách đơn hàng của tôi
Bài 2: Xử lý filter theo trạng thái và phân trang trong danh sách đơn hàng
Bài 3: Xử lý hủy đơn hàng trong đơn hàng của tôi
Bài 4: Xử lý mua lại sản phẩm trong đơn hàng của tôi (P1)
Bài 5: Hoàn thành mua lại sản phẩm
Bài 6: Fix bug những vấn đề tồn động khi mua lại đơn hàng
Bài 7: Xây dựng trang chi đơn hàng
Bài 8: Fix bug trang chi tiết đơn hàng và setup cho phần quản trị đơn hàng ở CM
Bài 9: Xây dựng trang quản lí đơn hàng (Danh sách + filter)
Bài 10: Hoàn thành quản trị đơn hàng

Chương 17: Quản lý đánh giá sản phẩm5 bài

5 bài

Bài 1: Fix bug đơn hàng và setup review
Bài 2: Hoàn thành quản trị đánh giá ở CMS
Bài 3: Viết đánh giá cho sản phẩm
Bài 4: Hoàn thành danh sách đánh giá của chi tiết sản phẩm
Bài 5: Hoàn thiện luồng phân quyền cho hệ thống

Chương 18: Tích hợp phương thức thanh toán (Stripe)6 bài

6 bài

Bài 1: Hướng dẫn đăng ký tài khoản test VNPAY
Bài 2: Phân tích luồng xử lý ở API
Bài 3: Xử lý phần UI cho thanh toán VNPAY
Bài 4: Tích hợp API thanh toán VN PAY
Bài 5: Hoàn thiện phần thanh toán trong đơn hàng
Bài 6: Hoàn thành việc tự động mở trang thanh toán khi đặt hàng

Chương 19: Thực chiến Next-Auth với Google va Facebook, Quên mật khẩu11 bài

11 bài

Bài 1: Tạo config cho phần OAuth google
Bài 2: Giải thích luồng OAuth ở phía FE VÀ BE
Bài 3: Setup next auth trong nextjs
Bài 4: Xử lý đăng nhập, đăng ký với Google (OAuth)
Bài 5: Giải quyết những vấn đề tồn động của phần OAuth với google
Bài 6: Setup config cho next auth với facebook
Bài 7: Xử lý đăng nhập, đăng ký với facebook (OAuth)
Bài 8: Giải quyết vấn đề tồn động của đăng nhập google, facebook
Bài 9: Phân tích và xây dựng UI cho tính năng quên mật khẩu
Bài 10: Hoàn thành tính năng quên mật khẩu
Bài 11: Improve lại danh sách sản phẩm ở trang HOME

Chương 20: Server side rendering trong page router6 bài

6 bài

Bài 1: Server site generation với getStaticProps trong page router
Bài 2: Dynamic SSG với getStaticPaths trong page router
Bài 3: Tìm hiểu về fallback trong getStaticPaths
Bài 4: Phân tích vấn của static site generation
Bài 5: Incremental static regeneration trong NextJS (ISR)
Bài 6: getServerSideProps trong page Router

Chương 21: Deploy, Improve UI cho trang Home4 bài

4 bài

Bài 1: Hướng dẫn deploy API
Bài 2: Giải quyết vấn đề tồn động khi deploy FE và API
Bài 3: Xử lý Skeleton cho danh sách sản phẩm
Bài 4: Xử ký Carousel cho danh sách review trang chi tiết sản phẩm

Chương 22: Bình luận sản phẩm, Quản trị bình luận (Socket.io)10 bài

10 bài

Bài 1: Setup những thay đổi về quyền cho phần bình luận
Bài 2: Phân tích về phần bình luận ở API
Bài 3: Hoàn thành quản trị bình luận ở CMS
Bài 4: Xây dựng component bình luận
Bài 5: Xử dụng đệ quy để show ra danh sách bình luận
Bài 6: Intergrate API bình luận với trả lời bình luận sản phẩm
Bài 7: Chỉnh sửa và xóa bình luận của tôi
Bài 8: Sử dụng socket io để bình luận real time
Bài 9: Hoàn thành bình luận realtime với socket io
Bài 10: Improve trang details sản phẩm

Chương 23: Phần báo cáo, dashboard12 bài

12 bài

Bài 1: Phân tích API ở phần report
Bài 2: Thống kê số lượng user theo từng loại
Bài 3: Bổ sung bộ lọc loại user cho danh sách người dùng
Bài 4: Thống kê số lượng sản phẩm theo trạng thái
Bài 5: Thống kê số lượng từng model trong hệ thống
Bài 6: Thống kê số lượng sản phẩm theo từng loại sản phẩm
Bài 7: Thống kê doanh thu đơn hàng
Bài 8: Thống kê số lượng đơn hàng theo trạng thái
Bài 9: Vẽ piechart cho phần thống kê người dùng, đơn hàng theo trạng thái
Bài 10: Lấy danh sách sản phẩm phổ biến nhất
Bài 11: Fix bug socket và next auth khi deploy
Bài 12: Fix bug phần danh sách bình luận (trùng user name)

Chương 24: Push notificattion với firebase9 bài

9 bài

Bài 1: Hướng dẫn setup firebase ở client và API
Bài 2: Nhận notification từ firebase trong nextjs
Bài 3: Phân tích luồng hoạt động của notification ở API và test thử với client
Bài 4: Xây dụng UI phần notication và setup services
Bài 5: Integrate API notification phần 1
Bài 6: Hoàn thành intgrate API notification
Bài 7: Infinite scroll với danh sách notification
Bài 8: Integrate luồng push notification với firebase
Bài 9: Improve config cho notification

Chương 25: Fix bug và improve dự án9 bài

9 bài

Bài 1: Refactor luồng cập nhật status đơn hàng và fix bug phân trang
Bài 2: Fix bug đặt đơn hàng khi thanh toán vn pay
Bài 3: Hoàn thiện việc tính số lượng lượt xem, người xem cho sản phẩm
Bài 4: Tích hợp chatbot AI vào website
Bài 5: Fix bug tồn động và hoàn thiện trang HOME
Bài 6: Update translate và improve UI
Bài 7: Fix bug không tăng số lượng sản phẩm trong giỏ hàng, đặt hàng lỗi
Bài 8: Xây dựng UI cho trang 401, 500, 404
Bài 9: Update device token khi fcm thay đổi như nào?

Chương 26: SEO cho website7 bài

7 bài

Bài 1: SEO là gì?
Bài 2: Chia sẻ cách phân trang khi SSR
Bài 3: Xử lý server side rendering kết hợp với client side rendering
Bài 4: Xử lý SSR cho trang chi tiết sản phẩm
Bài 5: Tối ưu SEO với thẻ meta
Bài 6: Add sitemap cho website
Bài 7: Add robots.txt cho website để làm gì?

Chương 27: React query - TanStack Query v513 bài

13 bài

Bài 1: React query là gì?
Bài 2: Những khái niệm cần nắm trong React Query
Bài 3: Setup React query trong NextJS (Page Router)
Bài 4: useQuery và những option cơ bản trong React Query
Bài 5: Tìm hiểu về staletime trong react query
Bài 6: Tìm hiểu về cacheTime(gcTime)
Bài 7: Áp dụng useQuery vào dự án
Bài 8: Query by id trong react query
Bài 9: useMutation trong tankstack query
Bài 10: Tối ưu performce trong react query
Bài 11: Custom useQuery trong react query
Bài 12: Custom hook useMutation trong react query
Bài 13: Tổng kết chương React Query V5

Chương 28: Clean code, improve performance5 bài

5 bài

Bài 1: Tối ưu custom axios
Bài 2: Hướng dẫn tôi ưu code tránh tính trạng re-render không cần thiết
Bài 3: Xử lý request interceptor trong hàng đợi
Bài 4: Improve việc call api ở quản lí người dùng
Bài 5: Improve việc call API ở tất cả danh sách quản trị

Chương 29: Convert dự án từ page router sang app router17 bài

17 bài

Bài 1: Khởi tạo dự án app router để chuẩn bị convert
Bài 2: Convert package từ page router sang app router
Bài 3: Thiết lập đa ngôn ngữ trong app router
Bài 4: Convert phần auth cho dự án
Bài 5: Convert component, layout, configs
Bài 6: Convert theme, react query, redux trong app router
Bài 7: Convert router từ page router sang app router
Bài 8: Hướng dẫn convert xử lý layout và guard cho từng trang
Bài 9: Xử lý lỗi notfound cho từng trang
Bài 10: Xử lý server side rendering trong app router
Bài 11: Convert path name trong app router
Bài 12: Xử lý đa ngôn ngữ trên router
Bài 13: Xử lý next auth trong app router với route handle
Bài 14: Update router trong app router và deploy website
Bài 15: Config next auth khi deploy
Bài 16: Tìm hiểu về Route Segment Config và xử lý việc ko hiển thị khi deployed
Bài 17: SEO, open graph trong app router

Chương 30: Storybook7 bài

7 bài

Bài 1: Tìm hiểu về storybook và setup vào dự án
Bài 2: Tìm hiểu về cách sử dụng storybook
Bài 3: Viết storybook cho component Icon
Bài 4: Viết storybook cho inputSearch component
Bài 5: Viết storybook cho component text field
Bài 6: Storybook cho component select (P1)
Bài 7: Hoàn thành chương storybook

Chương 31: Testing (Jest)15 bài

15 bài

Bài 1: Giới thiệu về jest và cài đặt các thư viện cần thiết
Bài 2: Viết lệnh test case đầu tiền với jest
Bài 3: Tìm hiểu matchers Truthiness
Bài 4: Matchers number
Bài 5: Matchers string và array
Bài 6: Exception matchers
Bài 7: Repeating Setup
Bài 8: Thực chiến viết test case đầu tiên với JEST
Bài 9: Những cách lấy element trong testing
Bài 10: Custom render trong NextJS App Router (Jest)
Bài 11: Hoàn Thành việc custom render trong Jest
Bài 12: Viết test case cho form đơn giản trong jest
Bài 13: Viết testcase cho tính năng đăng nhập
Bài 14: Viết testcase với login google trong jest
Bài 15: Hướng dẫn kĩ thuật mock useRouter trong jest

Chương 32: Interview1 bài

1 bài

Bài 1: Buổi Phỏng Vấn số ReactJS level Fresher

Gợi ý

Khoá học liên quan

Xem tất cả

−90%

Lập trình Web & Full-stack

ReactJS Super: Shopee Clone TypeScript

62 học viên

199.000 ₫1.990.000 ₫

Xem chi tiết

−97%

Lập trình Web & Full-stack

The Complete 2024 Web Development Bootcamp

34 học viên

50.000 ₫1.990.000 ₫

Xem chi tiết

−82%

Lập trình Web & Full-stack

Lập Trình NodeJs Super – Dự Án Twitter API

28 học viên

289.000 ₫1.590.000 ₫

Xem chi tiết

−94%

Lập trình Web & Full-stack

Combo 4 khoá học về NodeJS - Zendvn (Mới)

26 học viên

299.000 ₫4.800.000 ₫

Xem chi tiết