강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

Học Next.js(v15) từng miếng nhỏ

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

(5.0) 374 đánh giá

4,074 học viên

  • winterlood
이론 실습 모두
next.js13
Next.js
React
TypeScript

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

Dịch cái này sang tiếng Việt

  • Chúng ta sẽ tìm hiểu về các khái niệm mới nhất của Next.js (v15 trở lên).

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

  • Chúng ta sẽ tìm hiểu các khái niệm đa dạng như Server Components, Page Routing, Layout 설정, Data Fetching, Streaming, 배포 등

로드맵안내_넥스트

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

시리즈 강의 링크
> 한 입 크기로 잘라먹는 리액트 :https://inf.run/v3XAj
한 입 크기로 잘라먹는 타입스크립트 : https://inf.run/FpLm4
한 입 크기로 잘라먹는 넥스트 : https://inf.run/v3XAj

Nhờ tình yêu thương của mọi người mà khóa học này đã được xuất bản thành sách. Chân thành cảm ơn 🙇‍♂

  • Next.js chia nhỏ từng miếng vừa ăn | Official Trailer

Học Next.js(15+) từng miếng nhỏ

Với 15 giờ nội dung từ
Page Router đến App Router

💡Page Router là gì?

Router được sử dụng cho đến 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 router mới nhất được công bố sau phiên bản 13
Cung cấp các tính năng mới nhất như streaming, server action, v.v.

Từ phiên bản Next.js 13, App Router mới xuất hiện để bổ sung những hạn chế của Page Router.
Do đó, nếu không hiểu về Page Router thì sẽ khó có thể dễ dàng hiểu được cơ chế mới của App Router.

Do đó, khóa học này sẽ tiến hành theo thứ tự xem qua nhanh Page Router (5 giờ) trước, sau đó tìm hiểu kỹ lưỡng về App Router (10 giờ). Thông qua điều này, 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ế này.

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

Hãy dừng việc sử dụng tài liệu hình ảnh tĩnh
Khám phá Next.js cùng với các hoạt ảnh trực quan

Next.js có khá nhiều tính năng với cơ chế phức tạp.
Do đó, chỉ với tài liệu hình ảnh tĩnh thôi thì khó có thể giải thích đầy đủ.
Vì vậy, khóa học này sẽ đi kèm với các animation 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 hình ảnh liên quan đến React Server Component

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

Gần nhất với tình huống thực tế 🚧
Cung cấp máy chủ backend tự phát triển cho thực hành

Để tìm hiểu các tính năng caching 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 backend server tự phát triển.

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

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

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

Trước khi bắt đầu học tập chính thức, chúng ta sẽ tìm hiểu xem Next.js là công nghệ gì
và tại sao ngày nay nó lại nhận được nhiều sự quan tâm như vậy.

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

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

Phần 2. Tổng hợp cốt lõi Page Router

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

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

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

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

Trung tâm của chủ đề! Chúng ta sẽ tìm hiểu về App Router. Tìm hiểu App Router là gì, có những khác biệt kỹ thuật nào và cùng nhau tìm hiểu 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

Phần 4. Tìm nạp dữ liệu

Chúng ta sẽ tìm hiểu về việc fetch dữ liệu sử dụng Server Components.
Đồng thời cũng sẽ cùng tìm hiểu về các loại caching khác nhau mà Next cung cấp (data cache, request memoization).

Phần 4. Tìm nạp dữ liệu

Phần 4. Tìm nạp dữ liệu

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

Chúng ta sẽ tìm hiểu chi tiết về Full Route CacheClient Router Cache, hai loại cache trang trong phiên bản App Router.
Đồng thời, chúng ta cũng sẽ tìm hiểu thêm về Route Segment Options để thiết lập bắt buộc các tùy chọn cache của trang

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

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

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

Chúng ta sẽ tìm hiểu về streaming - tính năng giúp render ngay lập tức những phần đã sẵn sàng nhanh chóng trên trang.
Chúng ta sẽ xem xét cả hai cách: sử dụng file Loading và sử dụng Suspense.

Ngoài ra, chúng ta cũng sẽ tìm hiểu về phương pháp 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ẽ tìm hiểu về Server Actions - tính năng đã gây ra phản ứng sôi nổi khi được công bố.
Chúng ta sẽ xem xét 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 loading và trạng thái lỗi.

Phần 7. Server Action

Phần 7. Server Action

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 (Định tuyến song song) & Intercepting Routes (Định tuyến chặn) được cung cấp mới trong App Router.
Sử dụng những tính năng này để triển khai chức năng hiển thị các trang cụ thể dưới dạng modal mà không làm gián đoạn việc đ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, metadata, trang, region và nhiều yếu tố khác.
Triển khai dự án đã được tối ưu hóa lên Vercel và tiến hành một lần nữa công việc cải thiện hiệu suất.

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

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

Giống như cùng một món ăn nhưng trông đẹp mắt sẽ cảm thấy ngon hơn
tôi nghĩ rằng cùng một khái niệm giải thích nhưng có tài liệu hình ảnh trực quan và hấp dẫn hơn sẽ 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 hình.

Nguyên tắc 2. Sự tử tế

Khi xuất hiện các 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 tìm kiếm thêm trên Google khi nghe bài 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 suy nghĩ về tính hợp lý khi tạo ra bài giảng, luôn cân nhắc xem khi nội dung mới xuất hiện trong bài giảng có liên quan đến nội dung trước đó hay không, liệu các bạn có cảm thấy dòng chảy bị gián đoạn đột ngột hay không.

Nguyên tắc 4. Phát âm và khẩu hình tốt

Vì các bạn 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ó phát âm và khẩu hình tốt.
Để làm được điều này, tôi đã sản xuất bài giảng sao cho các bạn có thể hiểu được mọi thứ ngay cả khi phát ở tốc độ 2x.

Hãy nghe thử một lần! Link phát 2x tốc độ

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

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

예상 질문 Q&A 💬

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

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

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

Nếu bạn đã thành thạo Page Router thì có thể bỏ qua phần 2 và học trực tiếp từ phần 3.
Tuy nhiên, bạn cần có sự tự nhận thức chính xác về việc mình có hiểu rõ các hạn chế và đặc điểm của Page Router hay không.

Portfolio và video cá nhân

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

(Sách) Video giới thiệu React cắt nhỏ vừa một miếng

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

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

  • Các bạn học viên của loạt bài Một Miếng

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

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

  • Những bạn đang tìm kiếm các khóa học Kind 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à

31,068

Học viên

1,784

Đánh giá

1,355

Trả lời

4.9

Xếp hạng

5

Các khóa học

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

 

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ả

374 đánh giá

5.0

374 đánh giá

  • 프론트취준님의 프로필 이미지
    프론트취준

    Đánh giá 14

    Đánh giá trung bình 5.0

    5

    25% đã tham gia

    Next.js 강의는? 이정환. React.js 강의도? 이정환. TypeScript 강의도? 이정환. 공식입니다. 암기하십쇼. 시각적 자료와 딕션으로 머리에 때려박아주십니다. 이래도 결제 안 해? 독하다 독해. 아래 질문에 대답하기 어렵거나 헷갈리는 개념이 있다면 결제 하십셔. 도움 됩니다. 1. React와 Next.js를 사용했을 때 각 차이점을 TTV, TTI 관점에서 설명해 주세요. 2. Next.js 사전 렌더링에 대해서 설명해 주세요. 3. Next.js 프리페칭에 대해서 설명해 주세요. 4. Next.js 하이드레이션은 어느 시점에 이루어지나요? 5. Next.js 데이터 페칭은 어느 시점에 이루어지나요? 저는 하나도 몰랐는데 이제 대답할 수 있습니다. 시각 자료로 친절하게 떠먹여 주십니다. 잊을만 하면 복습 차원으로 가져와서 머리 속에 때려박아 주십니다. 원래 이렇게까지 후기 안 남기려고 했는데.. 강의질 높이려고 노력하신 티가 팍팍나서 후기를 안 남길 수 없었습니다. 진짜 무서운 점은 아직 강의 초반부인데 이 정도 수확을 얻을 수 있다는 거네요. (이제 고민 그만하고 결제하러 갑시다. 이래도 안 하시는 분 없겠지?)

    • 유호준님의 프로필 이미지
      유호준

      Đánh giá 9

      Đánh giá trung bình 5.0

      5

      8% đã tham gia

      프론트엔드 강의 === 이정환

      • dev

        공감합니다!!

    • bibipapa님의 프로필 이미지
      bibipapa

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      삽질하지 말고 그냥 이 강의 보세요

      • dla1434님의 프로필 이미지
        dla1434

        Đánh giá 4

        Đánh giá trung bình 4.3

        5

        92% đã tham gia

        원래 수강평은 잘 안 남기는데...이번 강의는 만족도가 너무 좋아서 남겨요 일단 제가 몇 개의 next 강의를 봤지만 강의에서 설명하기 어려운 부분은 이렇게 쓰면 되요라고 사용법만 알려주고 넘어가는 경우가 대부분이여서 항상 왜 써야 되지?뭐가 다른거지 라는 의문점이 들었는데 공식문서를 찾아봐도 모호한 부분이 많아서 이해가 안 되는 부분이 있었는데 이 강의를 보고 대부분 이해가 되었습니다 일단 설명과 자료도 이해하기 쉽게 되어 있고 이론을 설명한 뒤 다시 한번 실습으로 직접 보여주셔서 이번 강의는 제가 본 정환님 강의들 중에서도 최고라고 생각되는 강의였습니다. 기존 강의도 좋았지만 많은 고민과 피드백을 반영하신 결과라고 생각됩니다. 다음 강의도 너무 기대가 됩니다~~ 다음에는 next의 실전편 같은 강의도 제작되면 좋을 거 같습니다.

        • itjustbong님의 프로필 이미지
          itjustbong

          Đánh giá 5

          Đánh giá trung bình 5.0

          5

          74% đã tham gia

          강의 만족도가 높아서 수강평을 남깁니다! 프론트엔드 개발자이지만, 저는 Page Router 스택에 오랫동안 머물러 있었습니다. App Router에 도전을 안해본 것은 아니지만, 기존의 익숙함 때문인지 자꾸 Page Router를 사용하게 되더라구요... 그치만 어쩌다가 이 강의라도 들으면서 최신 트렌드?를 따라가보자는 생각이었는데, 생각보다 퀄리티가 굉장히 높았고, 제가 자꾸 Page Router로 돌아가는 이유 중에 하나가 App Router를 제대로 이해하지 못하고 있었던 부분도 컸던 것 같습니다. 이 강의를 들으면서 App Router가 어떻게 작동하는 지 이해할 수 있었고, 작은 프로젝트를 진행하면서 App Router에 대한 자신감?도 얻을 수 있었습니다. 이후 강의로 바라는 것이 있다면, App Router로 설정을 진행하면 디자인 시스템이나, 기타 여러 라이브러리? 들이 제대로 작동하지 않아 설정에 어려움을 겪는 경우도 있는데, 이런 설정들을 모두 포함한 실전편(혹은 고급편)도 있으면 좋을 것 같습니다! 감사합니다!

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

          36.300 ₫

          25%

          1.016.403 ₫

          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!