inflearn logo
inflearn logo

Next.js(v15) cắt nhỏ vừa miệng ăn

Tác phẩm thứ 3 trong series "Một miếng"! Đây là khóa học Next.js (15+) chi tiết và thân thiện 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) 532 đánh giá

5,263 học viên

Độ khó Cơ bản

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

Next.js
Next.js
React
React
TypeScript
TypeScript
Good for Gifting
Good for Gifting
Next.js
Next.js
React
React
TypeScript
TypeScript
Good for Gifting
Good for Gifting

Đá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 (phiên bản 15 trở lên).

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

> Đăng ký Thử thách Một miếng - Khóa 8 (~đến ngày 22 tháng 2) https://link.onebitefe.com/r/hxmv7u

로드맵안내_넥스트

Bạn có thể di chuyển đến 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

Link các khóa học trong series
> Học React từng miếng nhỏ:https://inf.run/v3XAj
Học TypeScript từng miếng nhỏ: https://inf.run/FpLm4
Học Next.js từng miếng nhỏ: 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 cắt nhỏ vừa miệng | Trailer chính thức

Next.js (15+) vừa miệng, vẫn hiệu quả ngay cả trong kỷ nguyên 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 có sự hiểu biết về Page Router thì rất khó để vận hành tốt cơ chế của App Router.

Vì vậy, khóa học này sẽ được tiến hành theo trình tự xem qua nhanh Page Router (5 giờ), sau đó sẽ đi sâu vào tìm hiểu App Router (10 giờ). Thông qua đó, bạn sẽ hiểu rõ những hạn chế của Page Router trước đây là gì 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 hình ảnh chuyển động 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 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 chuyển động đồ họa trực quan như dưới đây

Tài liệu hình ảnh liên quan đến App Router Layout

Tài liệu hình ảnh liên quan đến React Server Component

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

Tài liệu hình ảnh 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ự sản xuất để thực hành

Để xem xét các tính năng caching khác nhau của Next.js trong môi trường gần với thực tế hơn, chúng tôi cung cấp cho bạn một
máy chủ backend tự chế.

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

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

Tâm điểm của sự chú ý! Chúng ta sẽ cùng tìm hiểu về App Router. Tìm hiểu App Router là gì, có những sự khác biệt về kỹ thuật nào và cùng xem qua 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 (Lấy dữ liệu)

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

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

Phần 4. Truy xuất dữ liệu (Data Fetching)

Phần 5. Page Caching (Bộ nhớ đệm trang)

Chúng ta sẽ tìm hiểu chi tiết về Full Route CacheClient Router Cache, vốn là các cơ chế 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. Caching trang

Phần 5. Caching trang

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

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 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ẽ tìm hiểu về Server Actions, tính năng đã tạo nên sự hưởng ứng nồng nhiệt khi vừa ra mắt.
Chúng ta cũng sẽ tìm hiểu cách sử dụng Server Actions để thêm hoặc xóa dữ liệu, cũng như cách xử lý trạng thái tải (loading) và trạng thái lỗi.

Phần 7. Server Action

Phần 7. Server Actions

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

Chúng ta sẽ 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.
Thông qua đó, chúng ta sẽ triển khai tính năng hiển thị một trang cụ thể dưới dạng modal để 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ẫu đị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 đã 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 series Một Miếng (One Bite)

⚖ 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 những tài liệu hình ảnh trực quan, bao gồm cả cá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 và sự liên kết, luôn cân nhắc xem 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 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à giọng đọc tốt.
Vì lý do này, tôi đã sản xuất bài giảng sao cho bạn vẫn có thể hiểu rõ mọi thứ 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

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

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 ai đã 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 thêm các 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 code cho type, bạn hoàn toà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 thôi, có nhất thiết phải học 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 tự đánh giá chính xác xem mình đã hiểu rõ về những hạn chế cũng như đặc điểm của Page Router hay chưa.

Danh mục hồ sơ năng lực và video cá nhân

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

Video giới thiệu cuốn sách "Học nhanh React theo phong cách vừa ăn" (React Bite-size)

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 (15+) 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

37,762

Học viên

2,651

Đánh giá

1,623

Trả lời

4.9

Xếp hạng

19

Các khóa học

Chúng ta cùng thưởng thức Web Frontend theo từng miếng nhỏ vừa ăn 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ị, và

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

 

  • 📚 Sách

     

  • 📹 Bài giảng

    • Next.js miếng nhỏ dễ ăn

    • TypeScript vừa tầm một miếng (TypeScript miếng nhỏ dễ ăn)

    • React học một lần là hiểu ngay

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ả

532 đánh giá

5.0

532 đá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 ý!!

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

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

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

          Ưu đãi có thời hạn, kết thúc sau 5 ngày ngày

          26 ₫

          29%

          1.000.416 ₫