React Pro Max với Next.JS - Làm Chủ React.JS Hiện Đại

Gánh Team React Client/Server với Vite và Framework Next.JS (Typescript)

4.7

(728 đánh giá)

2,912 học viên

Giảng viên

Hỏi Dân IT @hoidanit

Đánh giá cao

79.000đ 1.199.000đ -93%

✓ Xem giỏ hàng và thanh toán

Mua trực tiếp qua Zalo Học thử bài 1

45.5 giờ video

1 tài nguyên

3 bài viết

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 27/04/2026

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

Làm Chủ React Toàn Diện Với Typescript

Xây dựng giao diện Admin React với Antd Design/Vite

Hiểu rõ cơ chế render React ở Client và Server

Rèn luyện tư duy phân tích, tích hợp thư viện javascript với React

Nắm vững kiến thức cốt lõi của NextJS và React

Thực hành NextJS kết hợp với MUI

Yêu cầu

Có Hiểu Biết về React là lợi thế

Có hiểu biết về TypeScript là lợi thế

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

Các bạn theo đuổi lộ trình trở thành fullstack developer

Cần học framework Nextjs để xây dựng frontend chuyên nghiệp

Cần SEO website với React

Nội dung khóa học

28 phần • 298 bài giảng

1 Demo Kết quả đạt được

2 Hướng Dẫn Sử Dụng Tính Năng Role Play (Nhập Vai)

3 Hướng Dẫn Sử Dụng Udemy Dành Cho Người Mới Bắt Đầu

4 Cách Hỗ Trợ/Support Trong Quá Trình Học (Bắt Buộc Xem)

1 #0.1 AI Đã Thay Đổi Cách Học Code Như Thế Nào ?

2 #0.2 Vibe Coding Là Gì? Fundamental-driven Approach

3 #0.3 Workflow: Prompt → Generate → Understand → Verify

4 #0.4 Khi Nào Không Nên Dùng AI

5 #0.5 Kinh Nghiệm Sử Dụng Trợ Lý AI

6 #0.6 Prompting Fundamentals Cho Developers

1 Tài liệu của Next.js 16

2 Tổng Quan Về Chapter

3 Next.js 16 Có Gì Hot ?

4 Hướng Dẫn Tích Hợp Next.js Devtools MCP (Next.js 16 trở lên)

5 Hướng Dẫn Sử Dụng Cache Component (Partial Prerendering - PPR)

6 use-cache

7 cacheLife

8 cacheTag & updateTag

9 revalidateTag

10 Security Advisory: CVE-2025-66478

1 #1. Hướng Dẫn Sử Dụng Khóa Học Hiệu Quả

2 #2. Tài liệu khóa học

3 #3. Yêu cầu của khóa học

4 #4.1 Cách Học Nhanh Nhất

5 #4.2 Về quyền tác giả

6 #4.3 Về tác giả

1 #5. Công cụ code IDE

2 #6. Browser

3 #7. Node.JS

4 #8. Quản lý code với Git

1 #9. Cách học kiến thức Javascript hiệu quả

2 #10.1 Destructuring Assignment (Part 1)

3 #10.2 Destructuring Assignment (Part 2)

4 #11. Spread syntax

5 #12. Conditional Operator (Toán tử điều kiện)

6 #13.1 Optional Chaining (Part 1)

7 #13.2 Optional Chaining (Part 2)

1 #14. Lưu ý về cách code React

2 #15.1 React là gì ?

3 #15.2 Phân loại dự án React

4 #16. Setup Project React với Vite

5 #17. Cấu trúc dự án React Vite

6 #18. Think in React

7 #19.1 Component (Part 1)

8 #19.2 Component (Part 2)

9 #20. Import/Export Component

10 #21. React JSX

11 #22. Sử dụng Variables với JSX

12 #23.1 Bài tập design Component Input (Part 1)

13 #23.2 Bài tập design Component Input (Part 2)

14 #24. Props là gì ?

15 #25.1 Props với Typescript (Part 1)

16 #25.2 Props với Typescript (Part 2)

17 #26. React Devtool

18 #27. Khái niệm Re-render

19 #28. Rendering Lists

20 #29. Key

1 #30. Event Handler

2 #31. State là gì ?

3 #32. useState Hook

4 #33. Bài tập về State (part 1)

5 #34. Bài tập về State (part 2)

6 #35. Passing Function từ Cha sang Con (Parent to Child)

7 #36. Lift up State

8 #37. Vòng đời của component

9 #38. Về React Cơ Bản

1 #39. Giới thiệu tổng quan về dự án thực hành

2 #40. Cài đặt Postman

3 #41. Cài đặt Mongodb Compass tại local

4 #42. Setup database MongoDB Atlas

5 #43+#44. Run dự án backend

1 #45. React Router

2 #46. Tạo Route Users

3 #47. Bài tập Design table User

4 #48. Backend và API là gì

5 #49. Postman để test API

6 #50.1 Gọi API với React (Part 1)

7 #50.2 Gọi API với React (Part 2)

8 #51. Mô hình stateless

9 #52. Hiển thị list User

10 #53.1 Sử dụng key React hiệu quả (Part 1)

11 #53.2 Sử dụng key React hiệu quả (Part 2)

1 #54. Thành phần của dev tool

2 #55. Kỹ thuật check api

3 #56. Nguyên tắc khi gọi API không có kết quả

1 #57. Tích hợp antd

2 #58.1 Design giao diện Admin (Part 1)

3 #58.2 Design giao diện Admin (Part 2)

4 #59. CSS với React

5 #60. Tích hợp SASS (SCSS)

6 #61. Antd Table

7 #62. Hiển thị danh sách Users

8 #63. Antd Modal

9 #64. Design Modal Add New

10 #65. API Add New User

11 #66. Bài tập Add New User

12 #67.1 Bài tập Design Modal Update User (Part 1)

13 #67.2 Bài tập Design Modal Update User ( Part 2)

14 #67.3 Bài tập Design Modal Update User (Part 3)

15 #68. Bài tập Update User

16 #69. Design Delete User

17 #70. Bài tập Delete User

18 #71.1 Pagination

19 #71.2 Antd Pagination

20 #71.3 Update Token

21 #72.1 Bài tập Paginate User (Part 1)

22 #72.2 Bài tập Paginate User (Part 2)

1 #73. Controlled Component vs Uncontrolled Component

2 #74. Thư viện hỗ trợ Uncontrolled Component

3 #75.1 Create User (Uncontrolled Component) (Part 1)

4 #75.2 Create User (Uncontrolled Component) (Part 2)

5 #76. Update User (Uncontrolled Component)

1 #77.1 Cài Đặt Dự Án React Vite Admin (Bổ Trợ)

2 #77.2 Vấn đề tồn đọng với cách viết React cũ (CSR)

3 #78. Nextjs là gì ?

4 #79. Nextjs làm frontend hay backend ?

5 #80. Setup dự án với Nextjs (tích hợp MUI)

6 #81. Cấu trúc dự án Next.js

7 #82.1 React children

8 #82.2 React Fragment

9 #83. Cách đọc tài liệu của Nextjs

10 #84. Chuyện Next.js ngốn RAM

1 #85. Tạo base giao diện

2 #86. Routing với nextjs

3 #87. Định nghĩa route

4 #88. Phân biệt cách code UI với React

5 #89. MUI là gì

6 #90. Cách sử dụng MUI component

1 #91.1 Bài tập Design App Bar (Part 1)

2 #91.2 Bài tập Design App Bar (Part 2)

3 #91.3 Bài tập Design App Bar (Part 3)

4 #92. Navigating

5 #93. Share Layout

6 #94. Server Component

7 #95. Client Component

8 #96. Use Client

9 #97.1 Design Main Content (Part 1)

10 #97.2 Design Main Content (Part 2)

11 #97.3 Design Main Content (Part 3)

12 #97.4 Design Main Content (Part 4)

13 #98.1 Design Footer (Part 1)

14 #98.2 Design Footer (Part 2)

15 #98.3 Design Footer (Part 3)

16 #99. Nextjs Environment Variables

17 #100. Fetch music from backend

18 #101. Fetch data với Nextjs

19 #102. Fetch Data HomePage

20 #103.1 Fetch Wrapper (Javascript)

21 #103.2 Fetch Wrapper (Typescript)

22 #104.1 Bài Tập Hoàn thiện HomePage (Part 1)

23 #104.2 Bài Tập Hoàn thiện HomePage (Part 2)

1 #105. Dynamic Route

2 #106. Search Params

3 #107. Giới thiệu về Wavesurfer

4 #108. Next.JS Public Folder

5 #109. Wavesurfer Basic

6 #110. React Ref

7 #111.1 CORS Policy

8 #111.2 NextJS Server với Route Handler

9 #111.3 Fetch Track From Remote Server (Backend)

10 #112. Tạo wavesurfer hook

11 #113. Sử dụng useMemo hook

12 #114. Handle Event với useCallback

13 #115. Add Bar Width

14 #116. HTML Canvas Gradients

15 #117. Add Gradients

16 #118. Add Time

17 #119. Add Hover

18 #120. Remove ID by Ref

19 #121.1 Add Customize Bar

20 #121.2 Bài tập design Layout Audio

21 #121.3 Chữa Bài tập design Layout Audio

22 #122. Add overlay with Comment

23 #123. Add Tooltip

24 #123.1 Fix Bug video #123

1 #124. Tài liệu về Authentication với Next.js

2 #125. Giới thiệu về Next-auth

3 #126. Test Next Auth

4 #127. Debugs với Next.js và VS Code

5 #128. Config Next-Auth Routes

6 #129. Config Github Provider

7 #130. Luồng hoạt động của Next-auth ?

8 #131. Config Session Cho Client

9 #132. Config Session cho Server

10 #133.1 Customize Session (Part 1)

11 #133.2 Customize Session (Part 2)

12 #133.3 Customize Session (Part 3)

13 #133.4 Customize Session (Part 4)

14 #134. Login with Credentials

15 #135. Nested Layout với Route Group

16 #136. Bài tập design Login Form

17 #137. Chữa Bài Tập Design Login

18 #138. Modify login page with Social Media

19 #139. Modify login page with Credential

20 #140. Hiển Thị Thông Báo Lỗi Khi Login

1 #141. Bài tập hiển thị danh sách tracks (admin)

2 #142. Chữa bài tập hiển thị danh sách tracks (admin)

3 #143. Delete a track (admin)

4 #144. Ý Tưởng Design Upload Track

5 #145. Input Type File

6 #146. Tích hợp MUI Tabs

7 #147.1 Tích hợp Drag/Drop (Part 1)

8 #147.2 Tích hợp Drag/Drop (Part 2)

9 #148.1 Bài tập Design Tab Information

10 #148.2 Chữa Bài tập Design Tab Information

11 #149. API Upload Single File ( with Fetch)

12 #150. Upload file with Axios

13 #151. Axios with Percents

14 #152.1 Upload Track (Part 1)

15 #152.2 Upload track: Image Preview (Part 2)

16 #152.3 Upload track complete (Part 3)

17 #153. Add Custom Message

18 #154. Profile Page

19 #155. Bài tập Render List Tracks Profile

20 #156. Customize track footer

21 #157. Quản lý React State Global

22 #158.1 Tích hợp React Context (Part 1)

23 #158.2 Tích hợp React Context (Part 2)

24 #159.1 Play/Pause Track with Context (Part 1)

25 #159.2 Play/Pause Track with Context (Part 2)

26 #160.1 Update view detail Track (Part 1)

27 #160.2 Update view detail Track (Part 2)

1 #161. Bài tập CRUD Comments (Admin)

2 #162. Bài tập hiển thị comment trên track

3 #163.1 Bài tập Component Comments (Part 1)

4 #163.2 Bài tập Component Comments (Part 2)

5 #164.1 Bài tập add a comment (Part 1)

6 #164.2 Bài tập add a comment (Part 2)

7 #165.1 Bài tập add likes (Part 1)

8 #165.2 Bài tập add likes (Part 2)

9 #166. Add count view

1 #167. Điều cần biết về SEO

2 #168. Công cụ check SEO

3 #169. Metadata

4 #170. SEO 1: Tối ưu hóa project

5 #171. SEO 2: Đặt tên Title/Description (Static) cho web page

6 #172. SEO 3: Đặt tên Title/Description (Dynamic) cho web page

7 #173.1 Cách hosting ảnh FREE (Extra)

8 #173.2 SEO 4: Share link website trên Facebook/Twitter

9 #174. SEO 5: Thêm logo cho website

10 #175.1 SEO 6: Url với slug (Part 1)

11 #175.2 SEO 6: Url với slug (Part 2)

12 #176. SEO 7: Robot.txt, sitemap và manifest.json

13 #177. SEO 8: JSON-LD

14 #178.1 SEO 9: Next.js Local Image

15 #178.2 SEO 9: Next.js Remote Image

16 #178.3 SEO 9: Next.js Loader Image

17 #178.4 SEO 9: Tối ưu Image với Next.js

1 #179. Add progress bar

2 #180. Handle Error

3 #181. Middleware

4 #182. Add Loading

5 #183. Nextjs build

6 #184.1 Build với Docker (Part 1)

7 #184.2 Build với Docker (Part 2)

8 #185. Phân tích kết quả Next.js build

9 #186. SSR và Static Site Generation

10 #187.1 SSG và generateStaticParams (Part 1)

11 #187.2 SSG và generateStaticParams (Part 2)

12 #188. NextJS Caching

13 #189.1 Revalidating data (Time based revalidation)

14 #189.2 Revalidating data (On-demand revalidation)

15 #189.3 Áp Dụng Revalidate By Tag

1 #190. Bài tập Playlist Page

2 #191. Bài tập Likes Page

3 #192. Bài tập Chức năng search

4 #193. Login with google

5 #194.1 Fix các bug còn tồn đọng

6 #194.2. Upgrade Next.js Version (và các thư viện khác)

7 #194.3 Next-Auth và Refresh Token

1 #195. Why NextJS ?

2 #196. Nhận xét về Level Fresher

3 #197. Nhận xét về khóa học này

4 #198. What’s next - Học gì tiếp theo ?

1 #199. Chuyện công nghệ update

2 #200. Một vài lưu ý về Next.js Update

3 #201. Next.js 14 có gì hot ?

4 #202. Setup Next.js 14 Only

5 #203. Setup Antd

6 #204. Bài tập Design Login Form với Antd

7 #205. Khái niệm Flick giao diện

8 #206. Setup Antd với Render trên Server

1 #207. Tổng quan về Server Actions

2 #208. Handle Form với Server

3 #209. Loading State và useFormStatus Hook

4 #210. Handling Response Data và useFormState Hook

5 #211. Các công cụ sử dụng với Server Actions

6 #212. Call Server Actions from Functions ?

1 #213. Design Giao Diện CRUD

2 #214. Bài Tập Create User Actions

3 #215. Bài Tập Update User Actions

4 #216. Bài Tập Delete User Actions

5 #217.1 Update Dự Án SoundCloud Sử Dụng Next.js 14

6 #217.2 Update Dự Án SoundCloud Sử Dụng Next.js 14

7 #218. So sánh Server Actions và Route Handler

8 #219. Tổng kết về Server Actions

1 #220. Tự Học Fullstack Next.js/Nest.js (Extra)

2 Lời Cảm Ơn & Đánh Giá Khóa Học

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

Next.JS là một framework javascript chuyên làm frontend, tích hợp sẵn thư viện React để code giao diện UI một cách hiệu quả.

Lợi thế của Next.js so với việc sử dụng React thuần túy, chính là việc cung cấp bộ khung framework, giải quyết các vấn đề thường gặp của React mà bấy lâu nay chúng ta cần tự xử lý, ví dụng như routing, nested route.

Ngoài ra, với lợi thế "server", Next.js có thể pre-render giao diện, giúp tốc độ load website nhanh hơn, và có ưu thế trong SEO so với việc dùng client side rendering của React thông thường.

Các trọng tâm của khóa học này, có thể kể đến như:

- Học React với Typescript (vì Next.js yêu cầu biết trước React để sử dụng framework này)

- Nắm vững cơ chế CRS (client side rendering) bằng cách sử dụng React với Vite, kết hợp design giao diện UI với Antd (Ant Design )

- Sử dụng Next.js (typescript), kết hợp với React và MUI để làm giao diện UI chuyên nghiệp.

- Thực hành dự án clone Soundcloud với React/Next.js và MUI

Khóa học này sẽ phù hợp với các bạn đang có nhu cầu tìm hiểu về React, muốn biết React được sử dụng trong thực tế như thế nào, cũng như muốn tạo ra một website đảm bảo hiệu năng kết hợp với SEO để tăng kết quả tìm kiếm từ Google.