Next.js vừa miệng, cắt nhỏ để ăn

Tác phẩm thứ 3 trong series “Một miếng”! Đây là khóa học Next.js thân thiện và chi tiết nhất trên thế giới. Không chỉ App Router, chúng ta còn tìm hiểu cả Page Router thông qua các dự án.

(5.0) 627 đánh giá

5,890 học viên

Độ khó Cơ bản

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

React
React
TypeScript
TypeScript
Next.js
Next.js
React
React
TypeScript
TypeScript
Next.js
Next.js

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

5.0

5.0

Next

100% đã tham gia

Tôi đã có thể học được nhiều kiến thức từ các khái niệm cơ bản đến nâng cao của Next.js. Đặc biệt, tôi có thể dễ dàng hiểu những chủ đề phức tạp có thể khó hiểu thông qua các tài liệu trực quan và hoạt hình. Nội dung bài giảng được sắp xếp theo từng giai đoạn, vì vậy ngay cả người mới bắt đầu cũng có thể dễ dàng theo dõi, và tôi nghĩ rằng ngay cả những nhà phát triển cấp trung trở lên cũng có thể học được nhiều điều bổ ích từ khóa học này. Ngoài ra, không chỉ dừng lại ở việc học ngữ pháp, khóa học còn đi sâu vào nguyên lý hoạt động và cơ chế bên trong của Next.js, SSR, SSG, ISR và nhiều phương pháp khác, đồng thời cũng đề cập đến các cách áp dụng vào các dự án thực tế, giúp tôi rất nhiều. Nhờ sự chuẩn bị và nỗ lực chu đáo của giảng viên, quá trình học Next.js thực sự thú vị và bổ ích. Tôi xin chân thành cảm ơn!

5.0

itjustbong

74% đã tham gia

Tôi đang để lại đánh giá vì tôi rất hài lòng với khóa học! Mặc dù tôi là một nhà phát triển front-end nhưng tôi đã bị mắc kẹt trong ngăn xếp Bộ định tuyến Trang trong một thời gian dài. Không phải là tôi chưa thử Bộ định tuyến ứng dụng, nhưng tôi vẫn tiếp tục sử dụng Bộ định tuyến trang, có lẽ vì tôi đã quen với nó... Tuy nhiên, tôi nghĩ mình sẽ bắt kịp những xu hướng mới nhất khi nghe bài giảng này nhưng chất lượng lại cao hơn tôi mong đợi rất nhiều và tôi nghĩ một trong những lý do khiến tôi tiếp tục quay lại Page Router là vì tôi không thực sự hiểu rõ. Bộ định tuyến ứng dụng. Bằng cách tham gia bài giảng này, tôi có thể hiểu cách thức hoạt động của Bộ định tuyến ứng dụng và tôi có thể tin tưởng vào Bộ định tuyến ứng dụng khi thực hiện một dự án nhỏ. Nếu có điều gì bạn muốn xem trong bài giảng tiếp theo, nếu bạn thiết lập Bộ định tuyến ứng dụng, bạn có thể sử dụng hệ thống thiết kế hoặc nhiều thư viện khác không? Có những trường hợp khó cài đặt vì cài đặt không hoạt động bình thường, vì vậy sẽ rất tuyệt nếu có phiên bản thực tế (hoặc phiên bản nâng cao) bao gồm tất cả các cài đặt này! Cảm ơn!

5.0

dla1434

92% đã tham gia

Thông thường tôi không thường xuyên để lại những nhận xét về bài giảng, nhưng tôi rất hài lòng với bài giảng này nên tôi đã bỏ nó đi. Đầu tiên tôi xem một số bài giảng Next, nhưng hầu hết chỉ dạy tôi cách sử dụng những phần khó giải thích trong bài giảng và nói “Bạn có thể sử dụng như thế này nên tôi luôn thắc mắc” Tại sao. Tôi có nên sử dụng nó không? Có gì khác biệt?” Tôi đã tra cứu tài liệu chính thức nhưng có rất nhiều phần không rõ ràng nên tôi không thể hiểu được. Tôi hiểu hầu hết bài giảng này. Trước hết, lời giải thích và tài liệu rất dễ hiểu. Sau khi giải thích lý thuyết, ông lại một lần nữa chứng minh nó bằng thực tế. Tôi nghĩ bài giảng này là một trong những bài giảng hay nhất mà tôi từng xem. Đó là một bài giảng. Bài giảng hiện tại tuy hay nhưng đó là kết quả của việc phản ánh rất nhiều trăn trở và phản hồi. Tôi nghĩ vậy. Tôi thực sự mong chờ bài giảng tiếp theo ~~ Lần sau sẽ rất tuyệt nếu tạo ra một bài giảng giống như một phiên bản thực tế của Next.

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

  • Tìm hiểu về các khái niệm mới nhất của Next.js.

  • Chúng ta sẽ tìm hiểu hầu hết các khái niệm, từ Page Router đến App Router.

  • Tìm hiểu các khái niệm đa dạng như component máy chủ, định tuyến trang, thiết lập bố cục, fetch dữ liệu, streaming, triển khai, v.v.

스크린샷 2026-08-26 001219
로드맵안내_넥스트

Bạn có thể truy cập lộ trình bằng cách nhấp vào hình ảnh. 
> Liên kết lộ trình: https://link.onebitefe.com/r/68zgsv

Liên kết các khóa học trong series
> React được chia nhỏ vừa miệng :https://inf.run/v3XAj
TypeScript được chia nhỏ vừa miệng : https://inf.run/FpLm4
Next được chia nhỏ vừa miệng : https://inf.run/v3XAj

Nhờ sự yêu mến và ủng hộ nhiệt tình của các bạn, khóa học này đã được xuất bản thành sách. Xin chân thành cảm ơn mọi người 🙇‍♂

  • Next.js vừa miệng | Official Trailler

Next.js được chia thành từng phần nhỏ, vẫn hữu ích ngay cả trong thời đại AI

Với thời lượng 15 giờ, từ
Page Router đến App Router

💡 Page Router là gì?

Bộ định tuyến được sử dụng trước phiên bản Next.js 13
Cung cấp các tính năng trực quan và ổn định

💡 App Router là gì?

Next.js 13 phiên bản trở đi, router mới nhất được ra mắt
Cung cấp các tính năng mới nhất như streaming và server action

App Router mới xuất hiện từ Next.js 13 được phát triển để khắc phục những hạn chế của Page Router.
Ngay cả trong thời đại AI viết mã thay bạn, nếu không hiểu về Page Router, bạn sẽ khó có thể nắm bắt đúng cơ chế của App Router.

Vì vậy, khóa học sẽ nhanh chóng tìm hiểu Page Router (5 giờ), sau đó đi sâu vào App Router (10 giờ). Qua đó, bạn sẽ hiểu sâu sắc những hạn chế của Page Router trước đây và cách App Router khắc phục những hạn chế này.

⚠ Tuy nhiên, đừng hiểu lầm: khóa học này tập trung vào App Router.

Đừng chỉ dùng hình ảnh tĩnh nữa
Cùng khám phá Next.js qua những hình ảnh động trực quan

Next.js có nhiều tính năng với cơ chế phức tạp.
Do đó, chỉ sử dụng hình ảnh minh họa tĩnh thì khó có thể giải thích đầy đủ.
Khóa học này đi kèm với những hình ảnh động trực quan như dưới đây.

Tư liệu trực quan liên quan đến React Server Component

Tài liệu trực quan liên quan đến Client Router Cache

Gần sát với tình huống thực tế nhất có thể 🚧
Cung cấp máy chủ backend tự xây dựng để thực hành

Để tìm hiểu các tính năng bộ nhớ đệm khác nhau của Next.js trong môi trường sát với thực tế hơn,
chúng tôi cung cấp máy chủ backend do chính chúng tôi xây dựng.

Tài liệu API máy chủ backend

Cấu trúc khóa học

Phần 1. Giới thiệu về Next.js

Trước khi bắt đầu học chuyên sâu, hãy cùng tìm hiểu Next.js là công nghệ gì
và tại sao ngày nay công nghệ này lại nhận được nhiều sự quan tâm đến vậy.

Phần 1. Giới thiệu về Next.js.

Phần 1. Giới thiệu về Next.js.

Mục 2. Tổng hợp những điểm cốt lõi của Page Router

(Tự chọn) Cùng với dự án, chúng ta sẽ nhanh chóng tìm hiểu về Page Router, được cung cấp từ những ngày đầu Next.js ra mắt.
Đồng thời, chúng ta cũng sẽ xem xét những bất tiện và hạn chế về mặt kỹ thuật của Page Router.

Phần 2. Giới thiệu về Page Router

Phần 2. Giới thiệu về Page Router

Phần 3. Bắt đầu với App Router

Trọng tâm của chủ đề! Hãy cùng tìm hiểu về App Router. Chúng ta sẽ tìm hiểu App Router là gì, có những khác biệt về mặt kỹ thuật nào, đồng thời xem xét cách sử dụng cơ bản.

Phần 3. Bắt đầu với App Router

Phần 3. Bắt đầu với App Router

Mục 4. Fetch dữ liệu

Tìm hiểu về việc fetch dữ liệu bằng Server Component.
Đồng thời, tìm hiểu về nhiều cơ chế caching do Next cung cấp (Data Cache, Request Memoization).

Phần 4. Fetch dữ liệu

Phần 4. Fetching dữ liệu

Phần 5. Caching trang

Tìm hiểu chi tiết về tính năng caching trang của phiên bản App Router, gồm Full Route CacheClient Router Cache.
Đồng thời, tìm hiểu thêm về tùy chọn phân đoạn route, dùng để buộc thiết lập các tùy chọn caching của trang.

Phần 5. Bộ nhớ đệm trang

Phần 5. Bộ nhớ đệm trang

Mục 6. Streaming & Xử lý lỗi

Tìm hiểu về streaming, giúp kết xuất ngay những phần được chuẩn bị nhanh trên trang.
Loading và phương pháp sử dụng Suspense..

Ngoài ra, chúng ta cũng sẽ tìm hiểu cách xử lý lỗi bằng tệp Error và cách khôi phục trang.

Phần 6. Streaming và xử lý lỗi

Phần 6. Streaming và xử lý lỗi

Mục 7. Server Actions

Tìm hiểu về Server Actions, tính năng đã nhận được phản hồi sôi nổi khi ra mắt.
Tìm hiểu cách sử dụng Server Actions để thêm hoặc xóa dữ liệu, cũng như xử lý trạng thái tải và trạng thái lỗi.

Phần 7. Server Action

Phần 7. Server Action

Mục 8. Các mẫu định tuyến nâng cao (Parallel, Intercepting)

Tìm hiểu về route song song (parallel) & route chặn (intercepting) mới được cung cấp trong App Router.
Sử dụng chúng để triển khai tính năng hiển thị một trang cụ thể dưới dạng modal mà không làm gián đoạn quá trình điều hướng của người dùng.

Phần 8. Mẫu định tuyến nâng cao

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

Mục 9. Tối ưu hóa và triển khai

Tìm hiểu các phương pháp tối ưu hóa hình ảnh, siêu dữ liệu, trang, khu vực, v.v.
Triển khai dự án đã được tối ưu hóa lên Vercel và tiến hành cải thiện hiệu năng thêm một lần nữa.

Phần 9. Tối ưu hóa và triển khai

Phần 9. Tối ưu hóa và triển khai

5 nguyên tắc của series Hanip

⚖ Nguyên tắc 1. Hình ảnh trực quan và phong phú

Cũng như cùng một món ăn nhưng món trông đẹp mắt hơn sẽ khiến người ta cảm thấy ngon miệng hơn,
tôi nghĩ rằng ngay cả khi giải thích cùng một khái niệm, hình ảnh trực quan và hấp dẫn hơn sẽ giúp người học dễ hiểu hơn.

Do đó, tôi đã không ngừng nỗ lực tạo ra các tài liệu trực quan, dễ hiểu, bao gồm cả hoạt ảnh.

⚖ Nguyên tắc 2. Sự tận tình

Khi xuất hiện thuật ngữ hoặc khái niệm mới, tôi không giải thích qua loa rồi bỏ qua, cũng không tự cho rằng các bạn đã biết. Tôi đã cố gắng hết sức để các bạn không phải vừa nghe giảng vừa phải tự mình lên Google tìm kiếm thêm.

⚖ Nguyên tắc 3. Tính hợp lý mạch lạc

Để duy trì hứng thú của các học viên, trong quá trình giảng dạy, tôi luôn cân nhắc tính mạch lạc khi xây dựng bài giảng: liệu nội dung mới xuất hiện có liên quan đến nội dung trước đó hay không, và liệu các bạn có cảm thấy mạch bài giảng đột nhiên bị gián đoạn hay không.

⚖ Nguyên tắc 4. Giọng nói và phát âm rõ ràng

Vì bạn sẽ phải nghe giọng nói của tôi trong thời gian dài, tôi luôn nỗ lực để có giọng nói và cách phát âm tốt.
Vì vậy, tôi đã xây dựng bài giảng để bạn vẫn có thể nghe hiểu toàn bộ ngay cả khi phát ở tốc độ gấp 2 lần.

Hãy thử nghe một lần! Liên kết phát ở tốc độ 2x

⚖ Nguyên tắc 5. Giao tiếp

Tập hợp trong cộng đồng dành riêng cho học viên, cùng nhau chia sẻ kiến thức và tin tức để phát triển.

Các câu hỏi dự kiến Q&A 💬

Q. Khóa học này dành cho đối tượng nào?

Đây là khóa học được tối ưu cho những người có kiến thức cơ bản về React.js và TypeScript.
Tuy nhiên, đối với TypeScript, chúng tôi sẽ cung cấp thêm các giải thích bổ sung và tài liệu học bổ trợ trong quá trình học, vì vậy
bạn vẫn có thể theo học một cách dễ dàng, ngoại trừ phần viết kiểu dữ liệu.

Q. Tôi chỉ muốn học App Router, vậy có nhất thiết phải học cả phần Page Router không?

Nếu bạn đã thành thạo Page Router, bạn có thể bỏ qua phần 2 và học ngay từ phần 3.
Tuy nhiên, bạn cần tự đánh giá chính xác xem mình đã hiểu rõ những hạn chế cũng như đặc điểm của Page Router hay chưa.

Portfolio và video cá nhân

INFCON2023 - Tại sao TypeScript lại như vậy?

(Video giới thiệu sách) Video giới thiệu “React cắt thành từng miếng vừa ăn”

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

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

  • Các học viên của series Học Một Miếng

  • Những người mới bắt đầu làm quen với Next.js

  • Dành cho những ai muốn học với phiên bản Next.js mới nhất

  • Dành cho những ai đang tìm kiếm một bài giảng thân thiện và chi tiết

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

  • React.js (cơ bản)

  • TypeScript (cơ bản)

Xin chào
Đây là winterlood

Xác minh Inflearn

Xác minh sự nghiệp

43,832

Học viên

3,369

Đánh giá

1,768

Trả lời

4.9

Xếp hạng

34

Các khóa học

Luôn có cách để giải thích mọi thứ một cách dễ dàng!


Thêm

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

Tất cả

66 bài giảng ∙ (15giờ 33phú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ả

627 đánh giá

5.0

627 đánh giá

  • rhs199813739님의 프로필 이미지
    rhs199813739

    Đánh giá 9

    Đánh giá trung bình 5.0

    5

    8% đã tham gia

    Bài giảng front-end === Jeong-Hwan Lee

    • Đồng ý!!

  • bibipapa님의 프로필 이미지
    bibipapa

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Đừng vội, hãy xem bài giảng này.

    • justfix0109464님의 프로필 이미지
      justfix0109464

      Đánh giá 15

      Đánh giá trung bình 5.0

      5

      25% đã tham gia

      Còn bài giảng Next.js thì sao? Lee Jeonghwan. Bài giảng React.js cũng vậy? Lee Jeonghwan. Bài giảng TypeScript nữa à? Lee Jeonghwan. Đó là chính thức. Hãy ghi nhớ nó. Nó đánh vào đầu bạn bằng hình ảnh và cách diễn đạt. Vẫn chưa trả tiền? Đọc và đọc. Nếu bạn gặp khó khăn khi trả lời các câu hỏi dưới đây hoặc có khái niệm khó hiểu, vui lòng thanh toán. Nó giúp ích. 1. Vui lòng giải thích sự khác biệt giữa React và Next.js về TTV và TTI. 2. Vui lòng giải thích về kết xuất trước của Next.js. 3. Vui lòng giải thích việc tìm nạp trước Next.js. 4. Quá trình hydrat hóa Next.js xảy ra vào thời điểm nào? 5. Quá trình tìm nạp dữ liệu Next.js diễn ra vào thời điểm nào? Tôi không biết gì cả, nhưng bây giờ tôi có thể trả lời. Họ vui lòng đút cho chúng tôi những tài liệu trực quan. Nếu bạn quên điều gì đó, anh ấy sẽ mang nó đến cho bạn để xem xét và ghi nhớ nó vào đầu bạn. Ban đầu tôi không định để lại một bài đánh giá như thế này, nhưng tôi không thể không để lại một bài đánh giá vì rõ ràng là bạn đã bỏ ra rất nhiều công sức để nâng cao chất lượng bài giảng của mình. Điều thực sự đáng sợ là vẫn chỉ mới bắt đầu khóa học nhưng bạn vẫn có thể đạt được nhiều như vậy. (Bây giờ hãy ngừng lo lắng và đi trả tiền. Không có ai sẽ không làm điều này sao?)

      • dla14347593님의 프로필 이미지
        dla14347593

        Đánh giá 4

        Đánh giá trung bình 4.3

        5

        92% đã tham gia

        Thông thường tôi không thường xuyên để lại những nhận xét về bài giảng, nhưng tôi rất hài lòng với bài giảng này nên tôi đã bỏ nó đi. Đầu tiên tôi xem một số bài giảng Next, nhưng hầu hết chỉ dạy tôi cách sử dụng những phần khó giải thích trong bài giảng và nói “Bạn có thể sử dụng như thế này nên tôi luôn thắc mắc” Tại sao. Tôi có nên sử dụng nó không? Có gì khác biệt?” Tôi đã tra cứu tài liệu chính thức nhưng có rất nhiều phần không rõ ràng nên tôi không thể hiểu được. Tôi hiểu hầu hết bài giảng này. Trước hết, lời giải thích và tài liệu rất dễ hiểu. Sau khi giải thích lý thuyết, ông lại một lần nữa chứng minh nó bằng thực tế. Tôi nghĩ bài giảng này là một trong những bài giảng hay nhất mà tôi từng xem. Đó là một bài giảng. Bài giảng hiện tại tuy hay nhưng đó là kết quả của việc phản ánh rất nhiều trăn trở và phản hồi. Tôi nghĩ vậy. Tôi thực sự mong chờ bài giảng tiếp theo ~~ Lần sau sẽ rất tuyệt nếu tạo ra một bài giảng giống như một phiên bản thực tế của Next.

        • seungwoo님의 프로필 이미지
          seungwoo

          Đánh giá 7

          Đánh giá trung bình 5.0

          5

          74% đã tham gia

          Tôi đang để lại đánh giá vì tôi rất hài lòng với khóa học! Mặc dù tôi là một nhà phát triển front-end nhưng tôi đã bị mắc kẹt trong ngăn xếp Bộ định tuyến Trang trong một thời gian dài. Không phải là tôi chưa thử Bộ định tuyến ứng dụng, nhưng tôi vẫn tiếp tục sử dụng Bộ định tuyến trang, có lẽ vì tôi đã quen với nó... Tuy nhiên, tôi nghĩ mình sẽ bắt kịp những xu hướng mới nhất khi nghe bài giảng này nhưng chất lượng lại cao hơn tôi mong đợi rất nhiều và tôi nghĩ một trong những lý do khiến tôi tiếp tục quay lại Page Router là vì tôi không thực sự hiểu rõ. Bộ định tuyến ứng dụng. Bằng cách tham gia bài giảng này, tôi có thể hiểu cách thức hoạt động của Bộ định tuyến ứng dụng và tôi có thể tin tưởng vào Bộ định tuyến ứng dụng khi thực hiện một dự án nhỏ. Nếu có điều gì bạn muốn xem trong bài giảng tiếp theo, nếu bạn thiết lập Bộ định tuyến ứng dụng, bạn có thể sử dụng hệ thống thiết kế hoặc nhiều thư viện khác không? Có những trường hợp khó cài đặt vì cài đặt không hoạt động bình thường, vì vậy sẽ rất tuyệt nếu có phiên bản thực tế (hoặc phiên bản nâng cao) bao gồm tất cả các cài đặt này! Cảm ơn!

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

          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!