Lớp học chuyên sâu Next.js: Phần 1 Bản chất của App Router và thiết kế Rendering học qua nhiệm vụ

App Router của Next.js 15 là một kiến trúc mạnh mẽ giúp xây dựng các dịch vụ web hiệu suất cao bằng cách kiểm soát hoàn hảo ranh giới giữa Server và Client. Khóa học này sẽ giúp bạn kết nối rõ ràng các cơ chế rendering phức tạp, từ nguyên lý hoạt động của Server Components (RSC) đến 3 chiến lược caching chính (Static, Dynamic, ISR) thông qua 12 nhiệm vụ thực tế. Qua đó, bạn sẽ có khả năng thiết kế File System Routing và Nested Layouts phù hợp với yêu cầu kinh doanh, đồng thời thoát khỏi sự bất an của việc 'vibe coding' - sao chép mã mà không hiểu nguyên lý. Kết quả là, bạn sẽ trở thành một kiến trúc sư Next.js, người có thể nhận ra ngay lập tức các điểm yếu trong mã do AI tạo ra và chủ động chỉ đạo cấu trúc tối ưu nhất.

(5.0) 12 đánh giá

174 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

JavaScript
JavaScript
React
React
TypeScript
TypeScript
Next.js
Next.js
frontend
frontend
JavaScript
JavaScript
React
React
TypeScript
TypeScript
Next.js
Next.js
frontend
frontend

Đánh giá từ những học viên đầu tiên

5.0

5.0

태형

71% đã tham gia

Thông qua bài giảng Phần 1, tôi đã có thể hiểu rõ hơn về tính năng App Router của Next.js. Tôi rất thích vì có thể hiểu thêm về các tính năng của Next.js như sự khác biệt giữa Client Component và Server Component, cũng như cách sử dụng chúng như thế nào. Vì mức độ hài lòng cao nên tôi dự định sẽ học tiếp bài giảng Phần 2. Cảm ơn vì bài giảng chất lượng cao (__)

5.0

점심밥

30% đã tham gia

Tôi luôn lắng nghe và theo dõi các bài giảng của bạn. Sau React, tôi đang tiếp tục học sang Next. Tôi cảm thấy những kiến thức trước đây mình từng biết nhưng còn mơ hồ đang dần được hệ thống lại rõ ràng hơn. Sau này tôi cũng định sẽ học cả khóa JS nữa.

5.0

성민석

100% đã tham gia

Vì muốn nhanh chóng học cách sử dụng Next ở công ty nên mình đã mua và nghe hết cả bài 1, 2, 3. Thú thật là bài giảng giải thích rất dễ hiểu và hay, mình cũng cực kỳ ưng ý phần tóm tắt nội dung bài giảng nữa. Mình sẽ chăm chỉ học tập, cảm ơn bạn nhiều nhé~

Bạn sẽ nhận được điều này sau khi học.

  • Người mới bắt đầu đã biết cơ bản về React nhưng cảm thấy bế tắc trước kiến trúc App Router phức tạp của Next.js.

  • Nhà phát triển không biết ranh giới giữa Server Component (RSC) và Client Component nên đã gắn "use client" vào khắp mọi nơi.

  • Những người đang cảm thấy bất an với cái gọi là 'vibe coding' khi sao chép và sử dụng mã do AI tạo ra mà không hiểu nguyên lý.

  • Những người đang làm việc thực tế muốn hệ thống hóa lại các thay đổi về mô hình và cách xử lý tham số bất đồng bộ (asynchronous parameters) mới nhất trong Next.js 15.

  • Những nhà phát triển muốn thoát khỏi việc fetch dữ liệu ở phía client dựa trên useEffect và muốn xử lý dữ liệu một cách trực quan ngay trên server.

  • Những ai đang lo lắng về vấn đề mất trạng thái khi chuyển trang và muốn trải nghiệm sự kỳ diệu của bố cục lồng nhau (layout.tsx).

  • Một kiến trúc sư tương lai muốn thiết kế chiến lược caching tối ưu giữa Static, Dynamic và ISR để cân bằng giữa hiệu suất và tính thời gian thực.

  • Dành cho những ai muốn học kỹ thuật tối ưu hóa tạo trang tĩnh siêu tốc (SSG), giúp hiển thị hàng chục nghìn trang sản phẩm chỉ trong 0,01 giây.

  • Nhà phát triển hướng đến marketing, muốn kiểm soát hoàn toàn công cụ tìm kiếm (SEO) và trải nghiệm chia sẻ trên mạng xã hội bằng cách tận dụng siêu dữ liệu (metadata) động.

  • Những ai muốn xây dựng kỹ thuật tự phục hồi hệ thống và trải nghiệm người dùng (UX) tinh tế bằng cách sử dụng các tệp loading, error, và not-found.

  • Nhà phát triển tò mò về cấu trúc thư mục cấp doanh nghiệp (enterprise) và triết lý thiết kế giúp dễ dàng bảo trì ngay cả trong các dự án quy mô lớn.

  • Những người dày dạn kinh nghiệm muốn học hỏi tinh hoa của 'mô hình tổng hợp' (composition pattern) cấp độ cao để lắp ráp các thành phần server và client mà không gây xung đột.

  • Nhà thiết kế muốn nhận diện ngay lập tức các khiếm khuyết kỹ thuật trong mã do AI tạo ra và chủ động chỉ đạo thiết kế tối ưu.

  • Những người đang tìm việc muốn có chiều sâu kiến thức để có thể giải thích logic nguyên lý rendering trong các buổi phỏng vấn kỹ thuật, thay vì chỉ dừng lại ở việc triển khai tính năng đơn thuần.

  • Tất cả những người học muốn tạo ra một hồ sơ năng lực (portfolio) vững chắc bằng cách kiểm chứng lý thuyết thông qua mã nguồn thực tế với 12 nhiệm vụ thực hành.

🎓Master Class Next.js học qua nhiệm vụ: Phần 1 Bản chất của App Router và thiết kế Rendering

🤖 "Trong thời đại AI có thể lập trình xong mọi thứ chỉ trong 1 giây, liệu có thực sự cần thiết phải đào sâu nghiên cứu về framework không?"

Tôi khẳng định rằng, đây chính là thời điểm hoàn hảo nhất để thấu hiểu 'bản chất' của công nghệ. Trong thời đại mà ChatGPT hay Claude có thể dễ dàng tạo ra mã nguồn Next.js, thì với những công cụ càng mạnh mẽ và được sử dụng phổ biến, bạn sẽ càng dễ rơi vào những cái bẫy chí mạng nếu không nắm rõ 'nguyên lý thực sự' của chúng. Việc giải quyết các lỗi rendering không rõ nguyên nhân hay xung đột hydration, cũng như kết nối những đoạn mã rời rạc mà AI cung cấp để tạo nên một kiến trúc vững chắc, cuối cùng đều phụ thuộc vào 'năng lực thiết kế cốt lõi' của người lập trình.

Next.js không chỉ đơn thuần là một công cụ được bổ sung thêm vài tính năng vào React. Nó là một framework web full-stack áp đảo nhất hiện nay, định nghĩa lại hoàn toàn việc "làm thế nào để xây dựng một tòa thành kiên cố trên hệ sinh thái React".

Nhiều nhà phát triển khi học Next.js thường bắt đầu bằng việc tạo thư mục một cách vô tội vạ và viết mã từ các cú pháp API hời hợt, nhưng khóa học này bắt đầu từ triết lý Đảo ngược điều khiển (IoC) với câu hỏi "Tại sao chỉ riêng React thuần túy là không đủ?".

Khóa học này không chỉ đơn thuần là về vẻ bề ngoài của Next.js mà là về bản chất, tức là phần hoàn thiện nhập môn để học từng bước một về kiến trúc của App Router và cơ chế của server/client rendering ngay từ đầu.

Từ CSR → SSR → RSC (Server Components), bạn sẽ được kết nối hoàn hảo một luồng kiến thức khổng lồ: từ sự tiến hóa của rendering, routing dựa trên hệ thống tệp tin, tìm nạp và lưu trữ dữ liệu (Static/Dynamic/ISR), cho đến các tuyến phòng thủ xử lý ngoại lệ. Bạn sẽ trực tiếp quan sát và thực hành toàn bộ quá trình đó để hiểu rõ cách Next.js tối ưu hóa màn hình và xử lý dữ liệu như thế nào.

🧱 Triết lý cốt lõi trong cấu trúc bài giảng

📌 Hãy hiểu về Quy ước (Convention) thay vì Cấu hình (Configuration). → Thay vì học thuộc lòng mã code một cách mù quáng, chúng ta sẽ tìm hiểu nguyên lý tại sao hệ thống định tuyến tệp (file system routing) và các tệp đặc biệt (như page, layout, error, v.v.) mà Next.js bắt buộc sử dụng lại ra đời.

📌 Rendering và dữ liệu không phải là phép thuật, mà là một dòng chảy. → Bạn sẽ trực tiếp trải nghiệm bằng chính đôi tay mình quá trình thay đổi trạng thái và tìm nạp dữ liệu dẫn đến việc cập nhật màn hình, tức là quá trình dữ liệu chảy từ máy chủ vô hình đến màn hình trình duyệt và được lắp ráp lại.

📌 Kiểm soát hoàn hảo ranh giới giữa Server và Client. → Thoát khỏi mô hình thao tác mọi thứ trên trình duyệt, bạn sẽ được huấn luyện về 'Composition Pattern', kỹ thuật tách biệt và kết hợp giữa hiệu suất vượt trội của server và khả năng tương tác mượt mà của trình duyệt.

📌 Học tập qua nhiệm vụ tập trung vào thực hành, không chỉ dừng lại ở lý thuyết → Hoàn thiện kỹ năng thực chiến bằng cách trực tiếp giải quyết bằng mã nguồn các nhiệm vụ bám sát thực tế thường gặp trong công việc ở mỗi phần, chẳng hạn như xây dựng bảng điều khiển (dashboard), trình khám phá tệp đám mây, lộ trình công nghệ lọc đa tầng.


✨ Đặc điểm của bài giảng này

📌 Khóa học nhập môn Next.js duy nhất giúp bạn thấu hiểu từ "Bản chất của Framework" - Đảo ngược điều khiển (IoC)
→ Hiểu rõ sự khác biệt giữa thời kỳ React (Library) giống như xây nhà trên đất trống và Next.js (Framework) giống như dọn vào nhà mẫu, từ đó nắm vững quyền chủ động trong kiến trúc phần mềm.

📌 Sự tiến hóa của Rendering (CSR → SSR → RSC) và hình ảnh hóa hoàn hảo về Hydration
→ Tìm hiểu sâu ở cấp độ mã nguồn về quá trình Hydration — việc đổ JavaScript (nước) vào HTML tĩnh (rau khô) để thổi bùng sức sống — và nguyên nhân gây ra lỗi Mismatch.

📌 Phép màu của Search Params và Form HTML thuần túy không có JavaScript (useState)
→ Thoát khỏi căn bệnh quản lý trạng thái (State) bừa bãi, lĩnh hội logic tìm kiếm và lọc phía server mạnh mẽ chỉ bằng cách điều khiển tham số truy vấn URL bất đồng bộ và tiêu chuẩn web <form>.

📌 Huấn luyện 'Mô hình tổng hợp thành phần (Composition Pattern)' giúp lắp ráp Server và Client mà không gây xung đột
→ Trực tiếp thực hành 'Mô hình thành phần lá (Leaf Component Pattern)', một kỹ thuật cao cấp trong thực tế giúp ngăn chặn ô nhiễm render bằng cách chèn Server Component (ảnh) vào Client Component (khung hình).

📌 Thiết kế điểm thỏa hiệp hoàn hảo giữa tối ưu hóa hiệu suất và tính cập nhật thông qua Static Build (SSG) và ISR
→ Hiển thị vô số trang chỉ trong 0,01 giây với generateStaticParams, và giải quyết bài toán nan giải giữa chi phí máy chủ và trải nghiệm người dùng (UX) bằng cơ chế Stale-While-Revalidate.

Huấn luyện thiết kế kiến trúc thư mục cấp doanh nghiệp thay vì chỉ thực hành lập trình đơn thuần
→ Rèn luyện tư duy cấu trúc để cách ly hoàn toàn về mặt vật lý giữa bảng điều khiển (dashboard) và trang đích tiếp thị (marketing landing page) bằng cách sử dụng Nhóm tuyến đường (Route Groups) và Thư mục riêng tư (Private Folders).

Kết hợp tiêu chuẩn mới nhất của Next.js 15 và các nhiệm vụ kinh doanh bám sát thực tế
→ Bao gồm các nhiệm vụ thực hành để kiểm chứng ngay lập tức các khái niệm đã học trong mỗi phần bằng mã code, chẳng hạn như trình khám phá tệp đám mây, lộ trình công nghệ lọc đa tầng, giải pháp nhà thông minh, v.v.

Thiết kế nền tảng Full-stack 'lấy nguyên lý làm trọng tâm' giúp ghi nhớ lâu dài
→ Thay vì chỉ làm theo các hướng dẫn đơn giản, bạn sẽ xây dựng kỹ năng để có thể tự mình ứng dụng trước bất kỳ yêu cầu kinh doanh nào dựa trên nguyên lý hoạt động của framework. (Đây sẽ là nền tảng vững chắc cho Server Actions và kết nối DB mà chúng ta sẽ tìm hiểu sau này.)


1️⃣ Triết lý rendering của Next.js: Hiểu về nguyên lý hoạt động của Server Components (RSC) và Đảo ngược điều khiển (IoC) nhằm vượt qua những hạn chế của React truyền thống.

2️⃣ Định tuyến hệ thống tệp và duy trì trạng thái: Bỏ qua bản đồ giấy và chuyển sang định tuyến tự hành! Khám phá điều kỳ diệu khi trạng thái được bảo toàn ngay cả khi chuyển trang thông qua bố cục lồng nhau (layout.tsx) và Soft Navigation.

3️⃣ Truy xuất dữ liệu trực quan: Thoát khỏi "vũng lầy" của useEffect, bạn sẽ học được quy trình đổi mới để lấy dữ liệu từ máy chủ chỉ với một dòng async/await.

5️⃣ Mở rộng vô hạn của định tuyến động:
Với cú pháp Catch-all ([[...slug]]), bạn có thể xử lý vô số trang chi tiết và các cấp bậc danh mục vô tận chỉ với một tệp duy nhất.

4️⃣ Chinh phục sự kết hợp thành phần (Composition): Phân chia ranh giới giữa Server (dữ liệu) và Client (tương tác), đồng thời nuôi dưỡng tầm nhìn của một kiến trúc sư để lắp ghép chúng mà không gây xung đột.

6️⃣ Làm chủ 3 chiến lược bộ nhớ đệm (caching) chính: Thiết kế chiến lược tối ưu phù hợp với đặc tính dữ liệu trong số Static, Dynamic, ISR rendering và kiểm chứng thông qua nhật ký xây dựng (build log).

7️⃣ 3 biện pháp an toàn bảo vệ UX: Xây dựng hoàn hảo 404 tùy chỉnh, Skeleton UI và logic tự phục hồi hệ thống với các tệp not-found, loading, error.

8️⃣ Kiểm soát hoàn hảo tối ưu hóa SEO: Sử dụng siêu dữ liệu động (generateMetadata) để thống trị các công cụ tìm kiếm và tối đa hóa trải nghiệm chia sẻ trên mạng xã hội.

Những người đã biết cơ bản về React nhưng vẫn chưa thực sự cảm nhận được "tại sao" phải sử dụng framework Next.js

Những người đã nghe nói về Next.js nhưng không biết phải bắt đầu từ đâu khi nhìn vào tài liệu chính thức


Những ai muốn tận mắt xác nhận nguyên lý thực sự của việc Next.js vẽ trước màn hình từ phía máy chủ (SSR)

Những ai tò mò về nguyên lý định tuyến chính xác khi nghe nói rằng chỉ cần tạo tệp trong thư mục app là địa chỉ sẽ tự động được tạo

Những người đã hiểu khái niệm nhưng lại gặp khó khăn khi muốn chuyển hóa thành mã nguồn logic kinh doanh thực tế (data fetching, caching, xử lý lỗi)

Nhà phát triển muốn hệ thống hóa các nguyên lý cơ bản và mô hình (paradigm) mới nhất của Next.js 15 một cách chặt chẽ và logic.

Những người lần đầu nghe đến hoặc vẫn còn nhầm lẫn về Server Component (RSC) và cụm từ "use client"

Những người muốn thoát khỏi phương pháp SPA truyền thống vốn xử lý mọi thứ trên trình duyệt để chuyển sang tư duy Full-stack hiệu quả hơn

Những người muốn rèn luyện 'tầm nhìn kỹ thuật' để có thể phân biệt câu trả lời của AI là đúng hay sai và xây dựng nền tảng vững chắc.

✨ Sau khóa học này, bạn sẽ:

  • “Tại sao thành phần này lại được chia thành server (hoặc client)” Bạn có thể trực tiếp giải thích điều này dưới góc độ kiến trúc.

  • Bạn sẽ hiểu hoàn toàn cách định tuyến dựa trên hệ thống tệp tạo ra các bố cục lồng nhau (layout.tsx) và giao diện người dùng (UI) như thế nào.

  • Bạn sẽ nắm vững hoàn toàn nguyên lý tiến hóa của rendering, từ CSR, SSR cho đến RSC (Server Components).

  • Bạn sẽ triển khai bằng mã nguồn luồng dữ liệu trực quan, cho phép fetch dữ liệu trực tiếp từ server (async/await) mà không cần useEffect..

  • Tư duy về chiến lược render và caching như “chọn Static, Dynamic hay ISR tùy theo đặc điểm của dữ liệu” sẽ thấm nhuần vào bạn một cách tự nhiên.

  • Bạn sẽ tự mình hiểu được tại sao 3 thiết bị an toàn giúp bảo vệ trải nghiệm người dùng (UX) (loading, error, not-found) lại là thiết yếu.

  • Hiểu chính xác lý do và cách thức của mô hình kết hợp (Composition pattern) để chèn các thành phần máy chủ (Server Components) vào các thành phần máy khách (Client Components) một cách an toàn.

  • Bạn sẽ học được thói quen viết mã thực tế để tối ưu hóa SEO và chia sẻ mạng xã hội khi xử lý siêu dữ liệu động (generateMetadata).

  • Với mỗi dòng mã, bạn sẽ có được tầm nhìn của một kiến trúc sư để có thể truy vết một cách logic rằng “quyền kiểm soát render ở đây nằm ở server hay trình duyệt”.

  • Vượt ra khỏi giai đoạn lập trình chỉ bằng 'cảm tính (Vibe)', bạn sẽ có được đôi mắt của một kiến trúc sư để truy vết logic "quyền kiểm soát rendering đang nằm ở đâu" trong từng dòng mã và kiểm soát hoàn toàn các công cụ AI.

  • Bằng cách nắm vững nguyên lý tiến hóa của quá trình render từ CSR, SSR đến RSC (Server Components), bạn sẽ lọc bỏ hoàn toàn các lỗi 'Hallucination (ảo giác) dựa trên dữ liệu cũ' của AI vốn không còn phù hợp với mô hình Next.js 15 mới nhất.


🎯 Next.js Phần 1 – Bảng tổng kết nhiệm vụ

🟥 Layout Deep Dive — Thực hiện duy trì từ khóa tìm kiếm ngay cả khi chuyển trang

Tôi thực sự cảm nhận được rằng Layout lồng nhau (layout.tsx) của Next.js không chỉ đơn thuần là một cái khung bên ngoài mà còn là một "pháo đài bảo toàn trạng thái". Tôi đã học được điều kỳ diệu khi di chuyển giữa các trang bằng component <Link>, chỉ có phần nội dung bên trong page.tsx được thay đổi trong khi các giá trị nhập liệu trong Layout vẫn được giữ nguyên. Tôi sẽ trực tiếp triển khai việc chuyển đổi UX mượt mà theo phong cách ứng dụng mà không cần tải lại toàn bộ trang.


🟧 Menu tab Trang cá nhân — Xây dựng hệ thống chuyển đổi tab không làm mất trạng thái

Thiết kế điều hướng tab (tab navigation) – một yếu tố thiết yếu trong các trang thương mại điện tử hoặc cộng đồng – bằng hệ thống định tuyến tệp (file system routing). Bạn sẽ học được kỹ thuật bảo toàn trạng thái (State Preservation), giúp dữ liệu ở thanh tìm kiếm phía trên hoặc các UI dùng chung không bị mất đi ngay cả khi URL thay đổi khi nhấp vào các tab. Cùng trải nghiệm thực tế những lợi thế về hiệu suất của định tuyến phía máy khách (client routing).


🟪 Blog danh mục lồng nhau vô hạn — Chinh phục đa đường dẫn với Catch-all Route

Sử dụng cú pháp [[...category]] để xử lý các tầng danh mục của blog kỹ thuật với độ sâu không xác định chỉ bằng một tệp duy nhất. Tự động tạo thanh điều hướng (Breadcrumb) hiển thị vị trí hiện tại của người dùng bằng tham số mảng, và triển khai tìm kiếm phía máy chủ (server-side search) giúp duy trì trạng thái tìm kiếm ngay cả sau khi tải lại trang thông qua chuỗi truy vấn URL (?q=...).).


🟦 Trình khám phá lộ trình công nghệ phân cấp — Thiết kế hệ thống lọc phức hợp dựa trên URL

Kết hợp Optional Catch-all và Search Params để hoàn thiện hệ thống định tuyến phức hợp giúp lọc độ khó nhập môn/nâng cao. Trích xuất các tham số bất đồng bộ từ Server Component và xây dựng logic lọc dữ liệu phân cấp mà AI thường dễ bỏ sót. Thực hành thiết kế UI tập trung vào kiến trúc thông qua 'Spotlight Card' giúp làm nổi bật vị trí hiện tại.


🟩 Trình khám phá đám mây thư mục vô tận — Điều hướng phía máy chủ hoạt động không cần JavaScript

Xử lý hoàn hảo cấu trúc thư mục có độ sâu vô hạn như Google Drive bằng cú pháp [[...path]]. Không cần useState, chỉ với HTML <form>actionPath, chúng ta sẽ làm cho việc tìm kiếm trong thư mục hiện tại và lọc theo phần mở rộng hoạt động liên kết với nhau. Bạn sẽ học được bí quyết xây dựng hệ thống điều hướng hiệu suất cao mà không tốn chi phí Hydration chỉ bằng các công nghệ tiêu chuẩn của trình duyệt.


🟨 Premium Roastery & Bảng điều khiển trúng tuyển — Sự phân tách hoàn hảo giữa Server/Client Component

Sử dụng Route Groups (( )) để cách ly vật lý bố cục dành cho khách hàng và nhân viên, đồng thời ẩn các logic bảo mật bằng Private Folders (_). Hãy bỏ thói quen xấu là gắn "use client" vào mọi nơi, và học cách áp dụng 'Leaf Component Pattern' để chỉ tách biệt các phần cuối cùng cần tương tác. Bạn sẽ có được góc nhìn của một kiến trúc sư trong việc lắp ráp (Composition) khung xương tĩnh của máy chủ và các nút động của máy khách thành một thể thống nhất.


🟫 Phòng triển lãm nghệ thuật & Giải pháp nhà thông minh — Thiết kế doanh nghiệp đảm bảo hiệu suất và bảo mật

Chinh phục các mô hình kết hợp (composition patterns) nâng cao, nơi Server Component không trực tiếp import Client Component mà nhận chúng thông qua children để duy trì đặc tính của server. Tuân thủ các tiêu chuẩn bất đồng bộ của Next.js 15 và kiểm soát hoàn hảo việc lọc phía máy chủ để đảm bảo dữ liệu bảo mật không bị rò rỉ ra trình duyệt. Tối thiểu hóa chi phí Hydration để hoàn thiện thiết kế giúp màn hình đầu tiên hiển thị trong vòng 0,1 giây ở bất kỳ đâu trên thế giới.


Nền tảng video StreamFlix — Thiết kế SSR phát trực tuyến tối ưu hóa cả thời gian chờ đợi

Cố tình tạo ra tình huống trì hoãn truy xuất dữ liệu để thiết lập chiến lược tải (loading) nhằm ngăn chặn việc người dùng rời bỏ trang web. Bằng cách triển khai tách biệt giữa Spinner toàn cục (loading.tsx) và UI Skeleton đặc thù cho từng domain, chúng ta sẽ ngăn chặn hiện tượng thay đổi bố cục (Layout Shift). Bạn sẽ được học tinh hoa của thiết kế UX giúp tạo dựng niềm tin rằng "dữ liệu đang được tải về".


🟥 Nền tảng tài chính Vault-X — Xây dựng 3 thiết bị an toàn ngăn chặn sự sụp đổ hệ thống

Xây dựng hệ thống tự phục hồi giúp dịch vụ không bị gián đoạn ngay cả trong các tình huống ngoại lệ như lỗi tải dữ liệu tài chính. Bạn sẽ học kỹ thuật Error Boundary để chỉ thực thi lại khu vực bị lỗi bằng cách sử dụng tệp error.tsx và hàm reset(). Đồng thời, thiết lập thói quen lập trình phòng thủ của một kỹ sư dày dạn kinh nghiệm thông qua việc thiết kế cả global-error.tsx để chuẩn bị cho những thảm họa tồi tệ nhất.


🟧 Nền tảng phân tích nội bộ & Quản lý tri thức — Chiến lược Fetching và Caching dữ liệu phía Server

Thực hiện luồng dữ liệu mang tính cách mạng bằng cách lấy dữ liệu trực tiếp từ máy chủ mà không cần useEffect. Tùy thuộc vào tính chất của dữ liệu, hãy chọn chiến lược hiển thị tối ưu giữa Static (đóng băng) và Dynamic (vẽ lại mỗi lần). Trực tiếp kiểm chứng bằng mắt cách bộ nhớ đệm (caching) thúc đẩy hiệu suất bùng nổ trong chế độ vận hành (build -> start) thay vì chế độ phát triển.) rather than development mode.


🟪 StockView Tài chính & Boutique Giày — Boutique siêu tốc độ được triển khai bằng ISR và SSG

Tối thiểu hóa tải trọng máy chủ bằng ISR (Incremental Static Regeneration), giúp cập nhật dữ liệu trong nền mỗi 10 giây. Sử dụng generateStaticParams để tạo sẵn HTML cho hàng chục nghìn sản phẩm phổ biến ngay tại thời điểm build, đạt tốc độ truy cập 0,01 giây. Làm chủ kỹ thuật tối ưu hóa nâng cao để tìm ra điểm cân bằng hoàn hảo giữa tính thời gian thực và hiệu suất.


🟦 Cửa hàng trang sức Lux-Jewel — SEO thống trị công cụ tìm kiếm và chia sẻ mạng xã hội

Xây dựng hệ thống siêu dữ liệu động (generateMetadata) hiển thị tiêu đề và ảnh thu nhỏ (thumbnail) khác nhau cho hàng nghìn sản phẩm. Tối ưu hóa yêu cầu dữ liệu của siêu dữ liệu và kết xuất trang bằng cách tận dụng tính năng khử trùng lặp yêu cầu (Deduplication) của Next.js. Triển khai tiêu chuẩn Open Graph ở cấp độ thực tế để tối đa hóa tỷ lệ nhấp khi chia sẻ trên KakaoTalk và Facebook.

Lưu ý trước khi học

Môi trường thực hành

  • 💻 Node.js (v20 trở lên): Cấu hình khuyến nghị bắt buộc để thực hành Next.js 15

  • 🌐 Trình chỉnh sửa trực tuyến: Có thể thực hành ngay lập tức chỉ với trình duyệt (như StackBlitz)

  • 🪶 Kiến thức tiên quyết: Chỉ cần biết các khái niệm cơ bản về HTML·CSS·JS và React là đủ

  • 🧩 Cấu trúc hệ thống: Học tập 4 bước theo trình tự “Khái niệm → Trực quan hóa → Thực hành → Nhiệm vụ”

  • 🧰 Stack mới nhất: Các ví dụ mới nhất dựa trên VS Code và Next.js 15 App Router

  • Tập trung vào bản chất: Không chỉ là ghi nhớ cú pháp đơn thuần mà là hiểu “luồng vận hành hữu cơ giữa Server và Client”

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người đã biết cơ bản về React nhưng vẫn còn xa lạ với khái niệm Server Components (RSC) của Next.js

  • Những ai muốn bỏ thói quen viết ngay "use client" vào đầu mỗi tệp tin.

  • Những ai tò mò về luồng dữ liệu kiểu Next.js, nơi dữ liệu được lấy trực tiếp từ server mà không cần dùng useEffect

  • Những người đang lo lắng về vấn đề mất trạng thái khi chuyển trang và cần hiểu nguyên lý của layout lồng nhau (nested layout)

  • Những người muốn nắm vững từ cơ bản các chiến lược bộ nhớ đệm Static, Dynamic và ISR để tối ưu hóa hiệu suất.

  • Nhà phát triển tò mò về những kiến thức cơ bản của Static Site Generation (SSG) tốc độ siêu cao, giúp tạo sẵn hàng chục nghìn trang web.

  • Những ai muốn trực tiếp kiểm soát việc tối ưu hóa công cụ tìm kiếm (SEO) và chia sẻ mạng xã hội ở cấp độ mã nguồn.

  • Những ai muốn tạo ra trải nghiệm người dùng (UX) mượt mà bằng cách tận dụng màn hình tải và màn hình lỗi

  • Những người muốn hiểu nguyên lý hoạt động của Next.js một cách logic, thay vì chỉ dừng lại ở mức độ triển khai tính năng đơn thuần.

  • Những người muốn nuôi dưỡng tầm nhìn kiến trúc tối thiểu để có thể phân tích và kiểm soát mã nguồn do AI tạo ra.

Cần biết trước khi bắt đầu?

  • HTML/CSS, JS(ES6+/Bất đồng bộ), React cơ bản (Props, State)

  • Hiểu các cú pháp rất cơ bản của TypeScript

  • Ngay cả khi bạn mới bắt đầu với Next.js cũng không sao, và không cần thiết phải có kiến thức về backend.

Xin chào
Đây là nhcodingstudio

1,690

Học viên

106

Đánh giá

42

Trả lời

4.8

Xếp hạng

18

Các khóa học

Xin chào, chào mừng bạn đến với Woori Dongne Coding Studio!

Woori Dongnae Coding Studio là một nhóm giáo dục được thành lập bởi các nhà phát triển tốt nghiệp chuyên ngành Khoa học máy tính tại các trường đại học hàng đầu Bắc Mỹ như Carnegie Mellon, Washington, Toronto, Waterloo và đã tích lũy kinh nghiệm thực tế tại các tập đoàn IT toàn cầu như Google, Microsoft, Meta.

Ban đầu, mọi thứ bắt đầu từ một nhóm học tập được tạo ra bởi các sinh viên chuyên ngành Khoa học máy tính tại Mỹ và Canada với mong muốn cùng nhau học hỏi và phát triển. Dù học tại các trường đại học khác nhau và ở các múi giờ khác nhau, nhưng khoảng thời gian cùng nhau giải quyết vấn đề và học hỏi lẫn nhau đó vô cùng đặc biệt, và một ý nghĩ đã tự nhiên nảy ra.

“Nếu chúng ta truyền đạt lại đúng phương pháp mà mình đã học cho người khác thì sẽ thế nào nhỉ?”

Câu hỏi đó chính là điểm khởi đầu của Woori-dongne Coding Studio.

Hiện tại, khoảng 30 nhà phát triển đang đi làm và sinh viên đại học chuyên ngành Khoa học máy tính đang đảm nhận từng lĩnh vực chuyên môn riêng, trực tiếp thiết kế và giảng dạy lộ trình học từ cơ bản đến thực chiến. Vượt xa việc truyền đạt kiến thức đơn thuần, chúng tôi mang đến một môi trường nơi bạn có thể học hỏi dưới góc nhìn của một nhà phát triển thực thụ và cùng nhau phát triển.

“Lập trình viên thực thụ phải được học từ lập trình viên thực thụ.”

Chúng tôi bao quát toàn bộ quy trình phát triển web một cách hệ thống từ đầu đến cuối, nhưng không chỉ dừng lại ở lý thuyết mà sẽ giúp bạn nâng cao kỹ năng thông qua thực hành và phản hồi tập trung vào thực tế.
Triết lý của chúng tôi là cùng trăn trở và dẫn dắt sự trưởng thành của từng học viên một.

🎯 Triết lý của chúng tôi rất rõ ràng.
"Học tập thực sự đến từ thực hành, và sự trưởng thành chỉ hoàn thiện khi chúng ta đồng hành cùng nhau."

Từ những người mới bắt đầu học lập trình, đến những sinh viên đang chuẩn bị xin việc muốn nâng cao kỹ năng thực tế, hay những thanh thiếu niên đang khám phá định hướng nghề nghiệp.
Neighborhood Coding Studio mong muốn trở thành điểm khởi đầu của tất cả mọi người và là người bạn đồng hành đáng tin cậy trên cùng một con đường.

Giờ đây, đừng lo lắng một mình nữa.
Neighborhood Coding Studio sẽ luôn đồng hành cùng sự phát triển của bạn.


Chào mừng bạn đến với Neighborhood Coding Studio!

Neighborhood Coding Studio được thành lập bởi một đội ngũ các nhà phát triển từng theo học ngành khoa học máy tính tại các trường đại học hàng đầu Bắc Mỹ như Carnegie Mellon, Đại học Washington, Đại học Toronto và Đại học Waterloo, sau đó tích lũy kinh nghiệm thực tế tại các công ty công nghệ toàn cầu như Google, Microsoft và Meta.

Mọi thứ bắt đầu từ một nhóm học tập được thành lập bởi các sinh viên khoa học máy tính trên khắp Hoa Kỳ và Canada, được tạo ra để cùng nhau phát triển bằng cách chia sẻ kiến thức, giải quyết vấn đề và học hỏi lẫn nhau.
Mặc dù chúng tôi học ở các trường khác nhau và ở các múi giờ khác nhau, nhưng trải nghiệm này ý nghĩa đến mức đã dẫn chúng tôi đến một suy nghĩ đơn giản:

“Chuyện gì sẽ xảy ra nếu chúng ta chia sẻ cách học này với những người khác?”

Ý nghĩ đó đã trở thành nền tảng của Neighborhood Coding Studio.

Ngày nay, chúng tôi là một đội ngũ gồm khoảng 30 nhà phát triển và sinh viên khoa học máy tính đang hoạt động, mỗi người chịu trách nhiệm về lĩnh vực chuyên môn của mình—thiết kế và truyền tải một chương trình giảng dạy trải dài từ kiến thức nền tảng đến phát triển thực tế.
Chúng tôi không chỉ ở đây để giảng dạy—chúng tôi ở đây để giúp bạn nhìn nhận qua lăng kính của những nhà phát triển thực thụ và cùng nhau phát triển.

“Để trở thành một nhà phát triển thực thụ, bạn phải học hỏi từ những nhà phát triển thực thụ.”

Các khóa học của chúng tôi sẽ đưa bạn đi qua toàn bộ hành trình phát triển web—từ đầu đến cuối—tập trung vào thực hành thực tế, các dự án thực tế và phản hồi thực tiễn.
Chúng tôi quan tâm sâu sắc đến sự phát triển của từng học viên và cam kết hỗ trợ con đường của bạn trên mọi bước đi.

🎯 Triết lý của chúng tôi đơn giản nhưng mạnh mẽ:
"Học thực sự đến từ hành động, và sự trưởng thành thực sự diễn ra khi đồng hành cùng nhau."

Cho dù bạn chỉ mới bắt đầu, đang chuẩn bị cho công việc đầu tiên hay đang khám phá tương lai của mình trong ngành công nghệ,
Neighborhood Coding Studio luôn ở đây để trở thành bệ phóng—và là người bạn đồng hành đáng tin cậy của bạn trên suốt hành trình.

Bạn không cần phải thực hiện điều đó một mình.
Hãy để Neighborhood Coding Studio đồng hành cùng bạn hướng tới tương lai trong ngành phát triển phần mềm.

Thêm

Chương trình giảng dạy

Tất cả

78 bài giảng ∙ (3giờ 23phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

12 đánh giá

5.0

12 đánh giá

  • ipeul696614님의 프로필 이미지
    ipeul696614

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    71% đã tham gia

    Thông qua bài giảng Phần 1, tôi đã có thể hiểu rõ hơn về tính năng App Router của Next.js. Tôi rất thích vì có thể hiểu thêm về các tính năng của Next.js như sự khác biệt giữa Client Component và Server Component, cũng như cách sử dụng chúng như thế nào. Vì mức độ hài lòng cao nên tôi dự định sẽ học tiếp bài giảng Phần 2. Cảm ơn vì bài giảng chất lượng cao (__)

    • nhcodingstudio
      Giảng viên

      Chào bạn Tae-hyung! Tôi là nhcodingstudio, người chia sẻ kiến thức. Trước hết, với tư cách là người chia sẻ kiến thức, tôi thực sự cảm thấy rất tự hào và hạnh phúc khi biết rằng thông qua khóa học Next.js Master Class Part 1, bạn đã hiểu sâu sắc về sự khác biệt cũng như cách vận dụng Server/Client Component - vốn là cốt lõi của App Router! Việc nắm bắt nguyên lý rendering của Next.js ban đầu có thể còn xa lạ, nhưng tôi cảm thấy rất xứng đáng khi thấy bạn đã nắm bắt tốt bản chất của nó. Tôi chân thành cảm ơn bạn vì đã dành lời khen ngợi rằng đây là một bài giảng chất lượng cao. Để đáp lại sự ủng hộ nồng nhiệt của bạn, tôi muốn gửi tặng bạn một món quà nhỏ. Nếu bạn có dự định học tiếp Part 2 sắp tới, hoặc quan tâm đến bất kỳ khóa học nào khác trong các series của Woori Dongne Coding Studio, xin vui lòng liên hệ với tôi qua email dưới đây. Tôi sẽ hỗ trợ bạn ngay khi xác nhận thông tin. - Email liên hệ: jeony0535@naver.com Tôi sẽ chờ đợi bạn ở Part 2 tiếp theo với những nội dung phong phú để không phụ sự kỳ vọng của bạn. Chân thành ủng hộ sự phát triển rực rỡ của Tae-hyung! :D

  • woghk1190621님의 프로필 이미지
    woghk1190621

    Đánh giá 21

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    Lời giải thích trong bài giảng rất tận tình và có hệ thống nên tôi rất thích vì dễ hiểu. Nó đã giúp ích cho tôi rất nhiều!

    • nhcodingstudio
      Giảng viên

      Xin chào bạn Shim Jae-hwa! Tôi là người chia sẻ kiến thức đây :D Trước hết, tôi xin chân thành cảm ơn bạn đã tham gia khóa học <Next.js Master Class: Part 1 - Bản chất của App Router và Thiết kế Rendering học qua nhiệm vụ> và để lại đánh giá quý giá rằng "giảng viên giải thích tận tình, có hệ thống nên rất dễ hiểu". Phản hồi của bạn là nguồn động lực rất lớn đối với tôi. Tôi chân thành hy vọng rằng bản chất của App Router và các phương pháp thiết kế rendering mà bạn đã học được qua khóa học này sẽ giúp ích thực tế trong việc nâng cao năng lực phát triển Front-end của bạn lên một tầm cao mới. Để bày tỏ lòng biết ơn đối với sự học tập nhiệt huyết của bạn, tôi muốn gửi tặng bạn một ưu đãi nhỏ. Nếu bạn có mong muốn học thêm khóa học nào khác trong chương trình đào tạo của chúng tôi, xin vui lòng liên hệ với tôi qua email dưới đây. Sau khi xác nhận, tôi sẽ gửi mã giảm giá cho bạn ngay lập tức. Email liên hệ: jeony0535@naver.com Một lần nữa, cảm ơn bạn đã dành thời gian quý báu để để lại những lời nhắn ấm áp. Tôi chân thành ủng hộ sự phát triển của bạn! :D

  • fkdlsl90887355님의 프로필 이미지
    fkdlsl90887355

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    Tôi luôn lắng nghe và theo dõi các bài giảng của bạn. Sau React, tôi đang tiếp tục học sang Next. Tôi cảm thấy những kiến thức trước đây mình từng biết nhưng còn mơ hồ đang dần được hệ thống lại rõ ràng hơn. Sau này tôi cũng định sẽ học cả khóa JS nữa.

    • nhcodingstudio
      Giảng viên

      Chào bạn 점심밥, tôi là Mike từ Our Neighborhood Coding Studio. Tôi chân thành cảm ơn bạn đã để lại những đánh giá quý báu. Việc bạn tin tưởng và theo sát từ khóa học React đến lớp Master Class Next.js thực sự là nguồn động lực rất lớn đối với tôi. Đặc biệt, câu nói "cảm giác như những điều trước đây đã biết nhưng còn mơ hồ nay đã được sắp xếp lại rõ ràng" là phần thưởng lớn nhất dành cho tôi. Tôi rất vui vì 'sự thấu hiểu bản chất' mà tôi muốn truyền tải qua bài giảng đã đến được với bạn. Tôi sẽ chuẩn bị thật tốt để giúp bạn hoàn thiện nền tảng cơ bản vững chắc đó trong khóa học JS mà bạn sẽ tham gia sau này. Một lần nữa, tôi xin gửi lời cảm ơn sâu sắc vì bạn đã luôn tìm đến và ủng hộ các khóa học của Our Neighborhood Coding Studio. Tôi muốn gửi đến bạn một món quà nhỏ thay cho lời cảm ơn. Nếu có khóa học nào khác mà bạn muốn học thêm ngoài khóa học hiện tại, đừng ngần ngại gửi email cho tôi qua địa chỉ jeony0535@naver.com bất cứ lúc nào. Ngay khi xác nhận, tôi sẽ gửi mã giảm giá để bạn có thể sử dụng ngay. Trong tương lai, tôi sẽ tiếp tục đền đáp bằng những bài giảng mang lại sự phát triển thực chất cho bạn. Nếu có điều gì thắc mắc, hãy đặt câu hỏi cho tôi bất cứ lúc nào nhé! Cảm ơn bạn rất nhiều :D

  • jjmullan님의 프로필 이미지
    jjmullan

    Đánh giá 10

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    Mặc dù chưa học xong hết nhưng chỉ mới xem video ví dụ của Phần 1 mà mình đã thanh toán luôn cho đến tận Phần 3. Thật sự... vì khóa học giải thích nguyên lý hoạt động và ví dụ mã nguồn chi tiết như sách giáo khoa, lại còn cung cấp cả kịch bản (script) nữa nên mình nghĩ sẽ giúp ích rất nhiều cho cả những người mới bắt đầu học lẫn những người học để ôn tập lại. Mình sẽ tiếp tục theo dõi kỹ các bài học tiếp theo :)

    • nhcodingstudio
      Giảng viên

      Xin chào bạn Chaengjun! Tôi là nhcodingstudio, người chia sẻ kiến thức. Chỉ mới xem video ví dụ của Phần 1 mà bạn đã tin tưởng và thanh toán cho đến tận Phần 3, với tư cách là một người chia sẻ kiến thức, không có lời khen ngợi nào tiếp thêm sức mạnh cho tôi lớn hơn thế này. Tôi chân thành cảm ơn bạn vì đã gửi gắm niềm tin quý báu! Tôi rất vui khi bạn cảm thấy bài giảng giống như một cuốn 'sách giáo khoa'. Tôi đã dành rất nhiều tâm huyết vào việc cấu trúc kịch bản và các ví dụ mã nguồn để bài giảng có thể trở thành một cột mốc rõ ràng cho những người mới bắt đầu, đồng thời là một bản tóm tắt xuyên suốt các nguyên lý cho những người đang ôn tập. Tôi cảm thấy rất xứng đáng khi tâm huyết đó đã được truyền tải trọn vẹn đến bạn. Để đáp lại sự ủng hộ ấm áp mà bạn đã để lại, tôi muốn gửi tặng bạn một món quà nhỏ. Nếu bạn có nguyện vọng học thêm bất kỳ bài giảng nào khác trong series React của Woori Dongne Coding Studio hoặc các khóa học khác của chúng tôi, xin vui lòng liên hệ qua email dưới đây. Tôi sẽ gửi mã giảm giá cho bạn ngay khi xác nhận. * Email liên hệ: jeony0535@naver.com Các phần còn lại cũng được chuẩn bị rất kỹ lưỡng để không làm phụ sự kỳ vọng của bạn, hy vọng bạn sẽ tận hưởng và hoàn thành khóa học một cách vui vẻ. Tôi chân thành ủng hộ sự phát triển rực rỡ của bạn! :D

  • imuchgabis3999님의 프로필 이미지
    imuchgabis3999

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Vì muốn nhanh chóng học cách sử dụng Next ở công ty nên mình đã mua và nghe hết cả bài 1, 2, 3. Thú thật là bài giảng giải thích rất dễ hiểu và hay, mình cũng cực kỳ ưng ý phần tóm tắt nội dung bài giảng nữa. Mình sẽ chăm chỉ học tập, cảm ơn bạn nhiều nhé~

    • nhcodingstudio
      Giảng viên

      Xin chào bạn Seong Min-seok! Tôi là nhcodingstudio, người chia sẻ kiến thức. Trước hết, tôi xin chân thành cảm ơn bạn đã tin tưởng lựa chọn trọn bộ Part 1, 2 và 3 để nhanh chóng áp dụng Next.js vào công việc thực tế! Với tư cách là một người chia sẻ kiến thức, không có tin tức nào khiến tôi cảm thấy vững tâm và vui mừng hơn thế này. Tôi rất vui khi biết bạn không chỉ hài lòng với nội dung bài giảng mà còn cả những tài liệu đã được hệ thống lại. Tôi đã dành rất nhiều tâm huyết vào việc xây dựng các ví dụ mã nguồn và cấu trúc kịch bản để bạn có thể học tập hiệu quả ngay cả trong lịch trình công việc bận rộn, và tôi cảm thấy rất xứng đáng khi sự chân thành đó đã chạm đến bạn. Để đáp lại sự tin tưởng sâu sắc mà bạn đã dành cho tôi, tôi muốn gửi tặng bạn một món quà nhỏ. Vì bạn đã đang theo học tất cả các phần, nếu bạn có quan tâm đến bất kỳ khóa học nào khác trong các series của Woori Dongne Coding Studio (như React Master Class, Express.js, v.v.), xin vui lòng liên hệ với tôi qua email dưới đây. Ngay khi xác nhận, tôi sẽ hỗ trợ bạn tham gia khóa học đó ngay lập tức. Email liên hệ: jeony0535@naver.com Các phần còn lại cũng chứa đầy những nội dung bổ ích có thể áp dụng ngay vào thực tế, hy vọng bạn sẽ tiếp tục học tập vui vẻ cho đến khi hoàn thành khóa học. Tôi chân thành ủng hộ sự phát triển rực rỡ của bạn! :D

Khóa học khác của nhcodingstudio

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

626.589 ₫