Next.js vừa tầm một miếng ăn

Tác phẩm thứ 3 trong series "Một miếng"! Đây là khóa học Next.js chi tiết và tận tâm nhất thế giới. Chúng ta sẽ cùng tìm hiểu không chỉ App Router mà cả Page Router thông qua các dự án thực tế.

(5.0) 562 đánh giá

5,397 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

Đá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 Next.js mới nhất.

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

  • Tìm hiểu các khái niệm đa dạng như Server Component, định tuyến trang (page routing), thiết lập bố cục (layout), truy xuất dữ liệu (data fetching), truyền phát (streaming) và triển khai (deployment).

로드맵안내_넥스트

Nhấp vào hình ảnh để đi đến lộ trình học tập.
> Link lộ trình: https://link.onebitefe.com/r/68zgsv

Link các khóa học trong series
> React chuẩn kích thước một miếng ăn:https://inf.run/v3XAj
TypeScript chuẩn kích thước một miếng ăn: https://inf.run/FpLm4
Next.js chuẩn kích thước một miếng ăn: https://inf.run/v3XAj

Nhờ có sự ủng hộ nhiệt tình của mọi người mà bài giảng này đã được xuất bản thành sách. Tôi xin chân thành cảm ơn 🙇‍♂

  • Next.js vừa một miếng | Trailer chính thức

Next.js vừa miếng, vẫn hiệu quả ngay cả trong thời đại AI

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

💡 Page Router là gì?

Router đã đượ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ì?

Router mới nhất được công bố sau phiên bản Next.js 13
Cung cấp các tính năng mới nhất như Streaming, Server Actions

App Router mới xuất hiện từ phiên bản Next.js 13 được ra đời nhằm khắc phục những nhược điểm của Page Router.
Ngay cả trong thời đại AI viết code thay cho con người, nếu không hiểu về Page Router thì bạn sẽ khó có thể nắm vững cơ chế hoạt động của App Router.

Vì vậy, khóa học này sẽ tiến hành theo trình tự xem qua nhanh Page Router (5 giờ) và sau đó sẽ tìm hiểu sâu vào App Router (10 giờ). Thông qua đó, bạn sẽ hiểu sâu sắc về 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ế đó như thế nào.

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

Dừng lại với những tài liệu hình ảnh tĩnh
Khám phá Next.js cùng với các chuyển động hoạt họa trực quan

Next.js có nhiều tính năng với cơ chế phức tạp.
Vì vậy, chỉ với những tài liệu hình ảnh tĩnh thì rất khó để giải thích đầy đủ.
Khóa học này sẽ đi kèm với các hiệu ứng hoạt họa trực quan như dưới đây

Tài 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 với tình huống thực tế nhất có thể 🚧
Cung cấp máy chủ backend tự chế để thực hành

Để tìm hiểu các tính năng caching khác nhau của Next.js trong môi trường thực tế hơn, chúng tôi cung cấp
máy chủ backend tự chế.

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

Cấu trúc bài giảng

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

Trước khi bắt đầu học một cách nghiêm túc, chúng ta sẽ tìm hiểu xem công nghệ Next.js là gì
và tại sao ngày nay nó 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.

Phần 2. Tóm tắt cốt lõi về Page Router

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

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

Trung tâm của sự chú ý! Chúng ta sẽ cùng tìm hiểu về App Router. App Router là gì, có những điểm khác biệt về kỹ thuật nào, cũng như cách sử dụng cơ bản của nó.

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

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

Phần 4. Data Fetching

Chúng ta sẽ tìm hiểu về việc tìm nạp dữ liệu (data fetching) bằng cách sử dụng Server Components.
Đồng thời, chúng ta cũng sẽ cùng xem xét các loại bộ nhớ đệm (caching) khác nhau do Next cung cấp (Data Cache, Request Memoization).

Phần 4. Truy xuất dữ liệu

Phần 4. Tìm nạp dữ liệu (Data Fetching)

Phần 5. Cache trang (Page Caching)

Chúng ta sẽ tìm hiểu chi tiết về Full Route CacheClient Router Cache, vốn là các tính năng lưu bộ nhớ đệm trang của phiên bản App Router.
Đồng thời, chúng ta cũng sẽ tìm hiểu thêm về Route Segment Config dùng để thiết lập cưỡng bức các tùy chọn bộ nhớ đệm của trang.

Phần 5. Cache trang

Phần 5. Caching trang

Phần 6. Streaming & Error Handling

Chúng ta sẽ tìm hiểu về Streaming, giúp hiển thị ngay lập tức những phần đã chuẩn bị xong trên trang web.
Chúng ta sẽ xem xét cả hai cách: sử dụng tệp Loading và sử dụng Suspense..

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

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

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

Phần 7. Server Actions

Chúng ta sẽ cùng tìm hiểu về Server Action, tính năng đã tạo nên cơn sốt ngay khi vừa ra mắt.
Chúng ta cũng sẽ xem xét cách sử dụng Server Action để thêm hoặc xóa dữ liệu, cũng như cách xử lý trạng thái loading và trạng thái lỗi.

Phần 7. Server Actions

Phần 7. Server Actions

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

Tìm hiểu về Parallel Routes (Tuyến đường song song) & Intercepting Routes (Tuyến đường chặn) 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. Các mô hình định tuyến nâng cao

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

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

Chúng ta sẽ tìm hiểu các phương pháp tối ưu hóa hình ảnh, siêu dữ liệu (metadata), trang và khu vực (region).
Tiến hành triển khai dự án đã được tối ưu hóa lên Vercel và thực hiện thêm một bước cải thiện hiệu suất 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 sê-ri Một Miếng

⚖ Nguyên tắc 1. Tài liệu trực quan phong phú và trực quan

Giống như việc cùng một món ăn nhưng nếu trông đẹp mắt thì sẽ cảm thấy ngon miệng hơn,
tôi tin rằng cùng một khái niệm nhưng nếu có hình ảnh minh họa trực quan và hấp dẫn hơn thì sẽ dễ hiểu hơn.

Vì vậy, tôi đã nỗ lực không ngừng để tạo ra các tài liệu trực quan sinh động, bao gồm cả hiệu ứng hoạt họa.

⚖ Nguyên tắc 2. Sự tận tâm

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

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

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

⚖ Nguyên tắc 4. Phát âm và nhả chữ tốt

Vì bạn sẽ phải nghe giọng của tôi trong một thời gian dài, tôi luôn nỗ lực để có được phát âm và ngữ điệu tốt.
Để đạt được điều này, tôi đã thực hiện bài giảng sao cho bạn vẫn có thể hiểu hết mọi nội dung ngay cả khi phát ở tốc độ gấp đôi.

Hãy nghe thử xem! Link phát tốc độ 2x

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

Các học viên tập trung tại cộng đồng dành riêng cho khóa học để chia sẻ kiến thức, tin tức và cùng nhau trưởng thành.

Câu hỏi thường gặp Q&A 💬

Q. Đối tượng của khóa học này là ai?

Đây là khóa học được tối ưu hóa 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, tôi sẽ cung cấp các phần giải thích bổ sung hoặc tài liệu học tập bổ trợ ở giữa các bài giảng,
nên ngoại trừ phần viết type, bạn vẫn có thể theo dõi khóa học mà không gặp khó khăn gì.

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

Nếu bạn là người đã thành thạo Page Router, bạn có thể bỏ qua phần 2 và bắt đầu học ngay từ phần 3.
Tuy nhiên, bạn cần có khả năng siêu nhận thức chính xác về việc liệu mình đã hiểu rõ các 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 cuốn sách (Sách) React ăn liền (Bite-sized React)

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

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

  • Chào các bạn học viên của series "Một Hớp" (Hanim)

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

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

  • Những ai đang tìm kiếm một bài giảng tận tâm 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

38,399

Học viên

2,870

Đánh giá

1,655

Trả lời

4.9

Xếp hạng

19

Các khóa học

Cùng thưởng thức Web Front-end với kích thước vừa miệng nhé?!

Xin chào 🙇‍♂

Tôi là một người tin rằng luôn có cách để giải thích mọi thứ một cách dễ hiểu và thú vị, đồng thời cũng là

Tôi là người mong muốn tạo ra một cộng đồng nhà phát triển ấm áp nhất trên thế giới.

 

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ả

562 đánh giá

5.0

562 đánh giá

  • 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!

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

          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!

          1.012.743 ₫