Chinh phục hoàn toàn Next.js 16+ với TypeScript: Từ cơ bản đến kiến trúc mới nhất

Tôi thắc mắc

Học những gì vậy?

Next.js 16 là một framework full-stack dựa trên React, cung cấp mọi tính năng để tạo ra các dịch vụ web hiện đại, từ
Server Components (RSC), App Router, chiến lược bộ nhớ đệm dữ liệu và render, cho đến tối ưu hóa SEO và hiệu suất.

Tuy nhiên, Next.js đang phát triển các phiên bản rất nhanh chóng,
và nếu chỉ dựa vào tài liệu chính thức thì thật không dễ dàng để phán đoán “vậy rốt cuộc trong thực tế nên dùng cái gì”,
hay “cái này khi nào nên dùng ở server, khi nào nên dùng ở client”.

Trong khóa học này,
👉 chúng ta sẽ học tập trung vào những khái niệm cốt lõi nhất nhất định phải biết trong Next.js 16.
Thay vì tập trung vào lý thuyết, chúng ta sẽ tập trung vào các tiêu chuẩn và mô hình được sử dụng ngay trong các dự án thực tế.

Loại bỏ bớt những thiết lập và tùy chọn phức tạp hoặc có tính ứng dụng thực tiễn thấp,

• Hiểu cấu trúc định tuyến (routing) dựa trên App Router

• Phân chia vai trò rõ ràng giữa Server Component và Client Component

• Chiến lược tìm nạp dữ liệu và bộ nhớ đệm (cache, revalidate, no-store)

• Học tập hoàn hảo về "Cache Component", một trong những hệ thống caching mới nhất

• Thiết lập tiêu chuẩn cho Render tĩnh (SSG) và Render động (SSR)

• Ý nghĩa chính xác của ranh giới Loading / Error / Not Found

• Nguyên lý hoạt động của Link, Prefetch, Router Cache

• Server Actions và các mô hình sử dụng thực tế

• Cách thiết kế SEO và Metadata

Nội dung được xây dựng xoay quanh những chủ đề cốt lõi thường gặp nhất trong thực tế với Next.js 16.

Thông qua đó,
ngay cả người mới bắt đầu cũng có thể hiểu rõ luồng render và luồng dữ liệu của Next.js,
và phát triển thành một lập trình viên có thể giải thích được
“tại sao đoạn mã này lại hoạt động trên server”, hay “tại sao trang này lại được lưu vào bộ nhớ đệm (cache)”.

Không chỉ đơn thuần là “đã từng dùng thử Next.js”, mà là bài giảng giúp bạn xây dựng
tiêu chuẩn để hiểu và có thể lựa chọn Next.js. 🚀

Hoàn toàn phù hợp ngay cả với người mới bắt đầu,

Tôi sẽ hướng dẫn cho bạn mọi thứ từng bước một từ những điều cơ bản nhất.

Next.js 16 dựa trên nền tảng React, nhưng
khi mới tiếp cận,
bạn có thể cảm thấy khó khăn vì những khái niệm xa lạ như Server Component, cấu trúc routing, phương thức rendering, khái niệm caching.

“Tại sao đoạn mã này lại chạy trên server?”
“Khi nào thì nên dùng Client Component?”
Nếu là lần đầu tiên, việc cảm thấy bối rối là điều đương nhiên.
Đừng lo lắng nhé!

Trong khóa học này,
để ngay cả những người lần đầu tiếp cận Next.js cũng có thể hiểu được,
tôi sẽ giải thích từng bước một từ những điều cơ bản nhất theo dòng chảy của nội dung.

• Trang web được render như thế nào

• Vai trò giữa server và client được phân chia như thế nào

• Dữ liệu được lấy khi nào và ở đâu

giúp bạn giải thích để có thể hình dung rõ ràng trong đầu như một bức tranh.

Điểm đặc biệt chỉ có ở
bài giảng của Sucoding

Tối ưu hóa
cho trình độ của người mới bắt đầuChương trình giảng dạy cốt lõi

Phần 01 - Chuẩn bị

Trong phần này, chúng ta sẽ tiến hành các bước chuẩn bị cơ bản để tham gia bài giảng trước khi bắt đầu thực hành chính thức.
Chúng tôi sẽ hướng dẫn từ cách tải mã ví dụ sẽ sử dụng xuyên suốt bài giảng, hướng dẫn môi trường phát triển để tăng hiệu quả thực hành, cho đến cách đăng ký custom snippet để giảm thiểu các thao tác lặp đi lặp lại.

Phần 02 - Bắt đầu

Trong phần này, chúng ta sẽ tìm hiểu khái niệm về Next.js từng bước một từ đầu, và thực hiện quá trình bắt đầu dự án thực tế.
Sau khi hiểu Next.js là loại framework nào, chúng ta sẽ so sánh sự khác biệt giữa phương pháp cài đặt trực tiếp và phương pháp cài đặt dựa trên CRA để tổng hợp các đặc điểm của từng loại. Sau đó, chúng ta sẽ xem xét cấu trúc thư mục cơ bản và vai trò của các tệp trong dự án đã tạo, đồng thời sắp xếp lại cấu trúc một lần nữa trước khi tiến hành thực hành.

Phần 03 - Server Component và Client Component

Trong phần này, chúng ta sẽ đi sâu vào tìm hiểu về Server Component và Client Component, những khái niệm cốt lõi của Next.js.
Chúng ta sẽ tìm hiểu vai trò của từng loại component, đồng thời xem xét từng bước cách chúng được tạo ra và được sắp xếp dựa trên tiêu chí nào.

Ngoài ra, chúng tôi cũng giải thích cách gọi Server Component từ Client Component và cách thức hoạt động của children trong cấu trúc layout.

Cuối cùng, chúng ta sẽ làm rõ những hiểu lầm về Client Component và lỗi Hydration mà nhiều nhà phát triển thường gặp phải,
đồng thời trực tiếp trải nghiệm cách phân chia và thiết kế Server/Client Component trong dự án thực tế thông qua bài thực hành ứng dụng quản lý công việc (To-do list).

Phần 04 - App Router

Trong phần này, chúng ta sẽ hệ thống lại một cách bài bản về nguyên lý hoạt động và cấu trúc routing của Next.js App Router.
Sau khi tìm hiểu cấu trúc URL được ánh xạ với các thư mục như thế nào, chúng ta sẽ lần lượt xem xét các phương thức routing cốt lõi như route cơ bản, route lồng nhau và route động.

Ngoài ra, bạn sẽ học cách xử lý query string, cách thiết kế cấu trúc thư mục bằng cách sử dụng thư mục riêng tư (private folders) và nhóm route (route groups),
đồng thời làm rõ sự khác biệt và tiêu chuẩn sử dụng giữa các phương thức chuyển đổi route bằng Link và useRouter..

Cuối cùng, thông qua nhiệm vụ, bạn sẽ tự mình thiết kế và triển khai các route, hoàn thành việc thực hành toàn bộ luồng hoạt động của App Router.

Phần 05 - Các tệp định tuyến đặc biệt

Trong phần này, chúng ta sẽ tổng hợp vai trò và cách thức hoạt động của các tệp định tuyến đặc biệt chính
được sử dụng trong Next.js App Router.

Chúng ta sẽ tìm hiểu cách xử lý các tình huống lỗi thông qua not-found và global-not-found,
so sánh sự khác biệt giữa layout.tsx và template.tsx để hiểu về tiêu chuẩn tái sử dụng và khởi tạo layout.template.tsx.

Ngoài ra, thông qua loading.tsx, error.tsx, và global-error.tsx, chúng ta sẽ tổng hợp lại cách thiết kế trạng thái tải và ranh giới lỗi, đồng thời rèn luyện cảm giác sử dụng các tệp định tuyến đặc biệt trong dự án thực tế bằng cách phân tách và áp dụng bố cục thông qua các nhiệm vụ.

Phần 06 - Thiết lập Metadata

Trong phần này, chúng ta sẽ tìm hiểu từng bước cách thiết lập meta data trong Next.js App Router.
Trước tiên, chúng ta sẽ học cách thiết lập meta data cơ bản bằng cách sử dụng đối tượng metadata, và thông qua các tùy chọn title, absolute, default để hiểu cách meta data được hợp nhất và kế thừa giữa các trang như thế nào.

Sau đó, chúng ta sẽ tìm hiểu cách tạo siêu dữ liệu (metadata) động theo dữ liệu bằng cách sử dụng hàm generateMetadata,
đồng thời tổng hợp luồng xử lý siêu dữ liệu và những thay đổi mới nhất trong môi trường React 19.

Thông qua đó, bạn sẽ có được tiêu chuẩn thiết kế siêu dữ liệu thực tế cân nhắc đến cả SEO và trải nghiệm người dùng.

Phần 07 - Fetch dữ liệu

Trong phần này, chúng ta sẽ tập trung tìm hiểu về cách fetch dữ liệu trong môi trường Next.js App Router.
Trước tiên, chúng ta sẽ tìm hiểu cách hoạt động của API fetch được sử dụng trong Server Component, sau đó tổng hợp cách xử lý loading và xử lý lỗi dựa trên Server Component.

Sau đó, chúng ta sẽ so sánh phương thức fetch dữ liệu sử dụng hook use với cách lấy dữ liệu từ Client Component, đồng thời xem xét vai trò và hạn chế của từng phương thức.

Ngoài ra, chúng ta sẽ cùng nhau suy nghĩ về chiến lược tìm nạp dữ liệu (data fetching) để biết nên chọn tìm nạp phía server hay phía client dựa trên tiêu chí nào trong các dự án thực tế.

Cuối cùng, thông qua nhiệm vụ, bạn sẽ trực tiếp triển khai logic fetch dữ liệu và tổng kết lại bằng thực hành quy trình fetching hoàn chỉnh, bao gồm cả xử lý trạng thái loading và lỗi.

Phần 08 - Chiến lược Rendering

Trong phần này, chúng ta sẽ hệ thống lại các chiến lược hiển thị (rendering) tiêu biểu của ứng dụng web như CSR, SSR, SSG và ISR dưới góc nhìn của Next.js App Router.

Sau khi hiểu rõ từng phương thức rendering được thực thi khi nào và tạo ra kết quả gì,
chúng ta sẽ tìm hiểu từng bước cách Server Component (RSC) kết hợp với các chiến lược rendering sẵn có như thế nào.

Ngoài ra, chúng ta sẽ thực hành cách kiểm tra trực tiếp xem một trang trong dự án thực tế được render tĩnh hay render động, đồng thời tổng hợp tiêu chuẩn để đánh giá chính xác chiến lược rendering thông qua các tình huống dễ nhầm lẫn với CSR và những sai lầm thường gặp.

Cuối cùng, chúng ta sẽ trực tiếp kiểm tra ISR rendering và cùng suy nghĩ về cách cân bằng giữa hiệu suất và tính cập nhật của dữ liệu.

Phần 09 - Bộ nhớ đệm (Cache)

Trong phần này, chúng ta sẽ hệ thống lại các chiến lược bộ nhớ đệm (caching) của Next.js.

Đầu tiên, chúng ta sẽ tìm hiểu về mặt khái niệm 4 lớp bộ nhớ đệm (caching layers) mà Next.js cung cấp, đồng thời xem xét thời điểm việc lưu bộ nhớ đệm xảy ra và khi nào nó bị vô hiệu hóa, tập trung trọng tâm vào Data Cache.

Sau đó, bạn sẽ trực tiếp triển khai phương thức vô hiệu hóa theo yêu cầu (on-demand revalidation) bằng cách sử dụng revalidatePath và revalidateTag cùng với Server Actions. Không chỉ dừng lại ở mức độ sử dụng API đơn thuần, chúng ta sẽ cùng tổng hợp các tiêu chí đánh giá để quyết định nên chọn chiến lược vô hiệu hóa nào trong từng tình huống cụ thể.

Ngoài ra, chúng ta sẽ so sánh sự khác biệt giữa Request Memoization, Full Route Cache, và Router Cache để hiểu rõ vị trí và phạm vi hoạt động của từng loại bộ nhớ đệm.

Cuối cùng, thông qua các nhiệm vụ, bạn sẽ áp dụng chiến lược caching vào danh sách bài viết và ứng dụng To-do list, từ đó lĩnh hội cách thức hoạt động thực tế của cache thông qua thực hành.

Phần 10 - Route Handler

Trong phần này, chúng ta sẽ tìm hiểu về cách triển khai logic phía server trong môi trường App Router.

Sau khi hiểu cấu trúc cơ bản của Route Handler, chúng ta sẽ lần lượt tìm hiểu cách xử lý Query String, Dynamic Segment và dữ liệu trong Body. Tiếp theo, chúng ta sẽ thực hành cách đọc và thiết lập Header và Cookie, đồng thời kiểm tra cách xử lý xác thực hoặc nhận dạng người dùng ở cấp độ máy chủ.

Ngoài ra, chúng tôi cũng sẽ đề cập đến các chiến lược lưu trữ bộ nhớ đệm (caching) trong Route Handler, giúp bạn học cách thiết kế quy trình xử lý phía máy chủ thực tế thay vì chỉ dừng lại ở việc triển khai API đơn thuần.

Cuối cùng, thông qua nhiệm vụ UI mời nhóm và tải xuống tệp Excel, chúng ta sẽ hoàn thiện luồng cộng tác giữa máy chủ và máy khách.

Phần 11 – Hình ảnh và Phông chữ

Trong phần này, chúng ta sẽ tìm hiểu về chiến lược tối ưu hóa của Next.js.

Trước tiên, chúng ta sẽ tìm hiểu nguyên lý hoạt động bên trong của thành phần next/image, đồng thời xem xét cách tỷ lệ 1x/2x và srcset được tạo ra như thế nào. Sau đó, chúng ta sẽ thực hành cách cung cấp hình ảnh hiệu quả trong môi trường responsive bằng cách sử dụng thuộc tính sizes.

Ngoài ra, chúng tôi sẽ áp dụng phông chữ web và phông chữ địa phương bằng cách sử dụng next/font, đồng thời tổng hợp mối quan hệ giữa chiến lược tải phông chữ và sự thay đổi bố cục (layout shift). Cuối cùng, chúng tôi sẽ hoàn thiện bằng cách tích hợp với Tailwind để áp dụng các chiến lược tối ưu hóa vào dự án thực tế.

Phần 12 – Quản lý trạng thái client toàn cục và thay đổi chủ đề

Trong phần này, chúng ta sẽ phân tích so sánh các chiến lược quản lý trạng thái toàn cục.

Trước hết, chúng ta sẽ tìm hiểu về những hạn chế của mô hình props drilling và tổng hợp cách quản lý trạng thái toàn cục cơ bản bằng Context API. Tiếp theo, chúng ta sẽ so sánh mô hình Redux Toolkit và Zustand để tổng hợp ưu nhược điểm cũng như thời điểm sử dụng của từng loại.

Ngoài ra, chúng tôi cũng sẽ đề cập đến phương pháp triển khai chế độ sáng/tối dựa trên Tailwind và chiến lược chủ đề sử dụng next-themes. Cuối cùng, thông qua nhiệm vụ làm máy tính, chúng ta sẽ thực hành triển khai logic quản lý trạng thái và thay đổi chủ đề, từ đó nắm vững luồng thiết kế trạng thái toàn cục.

Phần 13 – Làm trang web phim

Trong phần này, chúng ta sẽ áp dụng tích hợp những nội dung đã học cho đến nay thông qua dự án thực tế.

Sử dụng TMDB API để triển khai trang chủ, trang chi tiết và chức năng tìm kiếm, từ đó trải nghiệm cấu trúc dịch vụ thực tế. Trong quá trình này, chúng ta sẽ áp dụng chiến lược tối ưu hóa hình ảnh và bộ nhớ đệm (cache) truy xuất dữ liệu, đồng thời cùng nhau xem xét các phương thức xử lý bảo mật.

Ngoài ra, chúng tôi sẽ áp dụng TanStack Query để phân tích so sánh các chiến lược tìm nạp dữ liệu phía máy khách (client fetching) và hiểu rõ sự khác biệt so với tìm nạp dữ liệu phía máy chủ (server fetching). Cuối cùng, chúng tôi sẽ tiến hành triển khai và kiểm tra xem các chiến lược kết xuất (rendering) thay đổi như thế nào sau khi triển khai.

Phần 14 – Các mẫu định tuyến nâng cao

Trong phần này, chúng ta sẽ tìm hiểu về các kỹ thuật định tuyến nâng cao của Next.js.

Hiểu khái niệm về Parallel Routes và Intercepting Routes, sau đó áp dụng vào dự án thực tế để triển khai cấu trúc dựa trên modal.

Không chỉ dừng lại ở việc triển khai chức năng đơn thuần, chúng ta sẽ tiếp cận dưới góc độ thiết kế để xem cấu trúc route kết nối với trải nghiệm người dùng như thế nào.

Ngoài ra, chúng tôi cũng sẽ tổng hợp cách bộ nhớ đệm của bộ định tuyến (router cache) hoạt động trong cấu trúc này, đồng thời tìm hiểu mối quan hệ giữa định tuyến nâng cao và chiến lược bộ nhớ đệm.

Cuối cùng, chúng ta sẽ hoàn thiện việc áp dụng vào thực tế bằng cách mở rộng trang web xem phim.

Phần 15 – Cache Components

Trong phần này, chúng ta sẽ tập trung vào Cache Components, một tính năng cốt lõi của Next.js 16.

Hiểu nguyên lý bộ nhớ đệm dựa trên use cache và phân tích phạm vi ảnh hưởng của các thành phần bộ nhớ đệm (cache components).-based caching and analyze the scope of influence of cache components.

Ngoài ra, chúng ta cũng sẽ cùng xem xét các trường hợp không thể lưu bộ nhớ đệm (caching) và ảnh hưởng của các phép toán không xác định (non-deterministic operations) đối với bộ nhớ đệm.

Tiếp theo, chúng ta sẽ thực hành cách kiểm soát thời gian tồn tại của bộ nhớ đệm bằng cách sử dụng cacheLife, đồng thời thiết kế chiến lược kết hợp giữa nội dung tĩnh và nội dung động.

Thông qua phần này, chúng tôi sẽ tổng hợp các tiêu chuẩn để có thể áp dụng mô hình caching mới nhất vào thực tế.

Phần 16 – Dự án cuối khóa

Trong phần cuối cùng, chúng ta sẽ hoàn thiện kiến trúc thực tế.

Kết nối MongoDB và kiểm tra cấu trúc API thông qua Swagger.

Tiếp theo, chúng tôi sẽ áp dụng chế độ sáng/tối (light/dark mode) và triển khai đăng nhập Kakao bằng cách sử dụng cấu trúc Parallel Routes và Intercepting Routes.

Không chỉ là chức năng đăng nhập đơn thuần, chúng ta sẽ thiết kế chiến lược token và luồng xác thực để hoàn thiện cấu trúc ở mức độ dịch vụ thực tế.

Phần này là quá trình tích hợp tất cả các chiến lược rendering, caching, routing và logic server đã học từ trước đến nay.

Câu hỏi thường gặp

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