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

Chúng ta sẽ học những gì?

Next.js 16 là một framework full-stack dựa trên React, cung cấp tất cả các 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 SEO và tối ưu hóa hiệu suất.

Tuy nhiên, Next.js đang phát triển với tốc độ rất nhanh,
và nếu chỉ dựa vào tài liệu chính thức thì thật không dễ dàng để quyết định “vậy trong thực tế nên dùng cái nào”,
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 phải biết trong Next.js 16.
Thay vì tập trung vào lý thuyết, chúng ta sẽ chú trọng vào các tiêu chuẩn và mô hình được sử dụng trực tiếp 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 dựa trên App Router

• Phân chia rõ ràng vai trò 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 chỉnh về "Cache Component", một trong những hệ thống bộ nhớ đệm mới nhất

• Xác định tiêu chuẩn giữa Rendering tĩnh (SSG) và Rendering động (SSR)

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

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

• Server Actions và các mô hình ứng 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 mã này lại hoạt động trên server” hay “tại sao trang này lại được 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 kiến thức 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, v.v.

“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 mới bắt đầu với 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 một lộ trình cụ thể.

• 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

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

Phần 01 - Chuẩn bị

Trong phần này, chúng ta sẽ thực hiện các bước chuẩn bị cơ bản để tham gia khóa học trước khi bắt đầu thực hành chính thức.
Nội dung bao gồm cách tải mã nguồn ví dụ sẽ được sử dụng xuyên suốt khóa học, hướng dẫn thiết lập môi trường phát triển để tối ưu hóa hiệu quả thực hành, và cả cách đăng ký custom snippet để giảm bớt 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 từng bước các khái niệm của Next.js 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, cũng như 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 thiết kế chia tách Server và 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 hóa nguyên lý hoạt động và cấu trúc định tuyến (routing) của Next.js App Router.
Sau khi tìm hiểu cách cấu trúc URL á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 định tuyến cốt lõi như định tuyến cơ bản (basic route), định tuyến lồng nhau (nested route) và định tuyến động (dynamic route).

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 cách sử dụ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, từ đó hoàn thiện toàn bộ luồng hoạt động của App Router bằng thực hành thực tế.

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 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.

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.

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 (loading) và ranh giới lỗi (error boundary), đồng thời rèn luyện kỹ năng 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 layout 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 metadata trong Next.js App Router.
Trước tiên, chúng ta sẽ học cách thiết lập metadata cơ bản bằng cách sử dụng đối tượng metadata, đồng thời tìm hiểu cách metadata được hợp nhất và kế thừa giữa các trang thông qua các tùy chọn title, absolute, và default.

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

Phần này tập trung vào việc cách thức 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 pháp 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à giới hạn của từng phương pháp.

Ngoài ra, chúng ta sẽ cùng nhau suy nghĩ về chiến lược fetch dữ liệu để biết nên lựa chọn giữa server fetching và client fetching 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 fetch 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, 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 được render tĩnh hay render động trong dự án thực tế, đồng thời tổng hợp các tiêu chí để đá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 quá trình render ISR, đồng thời cùng nhau 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 hóa lại các chiến lược bộ nhớ đệm (caching) của Next.js.

Trước 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) 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í cũng như phạm vi hoạt động của từng loại cache.

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, 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 theo từng bước. 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 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ủ mang tính thực tiễn 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 quy trình 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. 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 đáp ứng (responsive) bằng cách sử dụng thuộc tính sizes.

Ngoài ra, chúng ta sẽ áp dụng phông chữ web và phông chữ cục bộ bằng cách sử dụng next/font, đồng thời tìm hiểu mối quan hệ giữa chiến lược tải phông chữ và hiện tượng thay đổi bố cục (layout shift). Cuối cùng, chúng ta 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 giao diện (theme)

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 tiên, 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 cách 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, bạn 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 quy trình thiết kế trạng thái toàn cục.

Phần 13 – Làm trang web xem 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ế.

Thông qua việc sử dụng TMDB API để triển khai trang chủ, trang chi tiết và chức năng tìm kiếm, bạn sẽ được 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 truy xuất dữ liệu (data fetch cache), đồng thời cùng nhau xem xét các phương pháp 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 client (client fetching), từ đó hiểu rõ sự khác biệt so với tìm nạp dữ liệu phía server (server fetching). Cuối cùng, chúng tôi sẽ tiến hành triển khai (deploy) và kiểm tra xem chiến lược 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 Parallel Routes và Intercepting Routes, đồng thời áp dụng vào dự án thực tế để triển khai cấu trúc dựa trên Modal.

Thay vì chỉ triển khai các tính năng đơn thuần, chúng ta sẽ tiếp cận từ góc độ thiết kế để xem cấu trúc định tuyến (route) kết nối với trải nghiệm người dùng như thế nào.

Ngoài ra, chúng ta cũng sẽ tổng hợp cách bộ nhớ đệm của trình định tuyến (router cache) hoạt động trong cấu trúc này, từ đó hiểu rõ 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 tìm hiểu về 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).

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 ở cấp độ 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 kết xuất (rendering), bộ nhớ đệm (caching), định tuyến (routing) và logic máy chủ đã học từ trước đến nay.

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

Lưu ý trước khi khóa học bắt đầu