Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

一口サイズで食べるNext.js(v15)

一口シリーズの3番目の作品!世界で最もKindで詳細なNext.js(15+)講義です。App Routerだけでなく、Page Routerまでプロジェクトを通して学習します。

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

学習した受講者のレビュー

こんなことが学べます

  • 最新のNext.js(v15以上)の概念について見ていきます。

  • Page RouterからApp Routerまでほとんどの概念を見ていきます。

  • サーバーコンポーネント、ページルーティング、レイアウト設定、データフェッチング、ストリーミング、デプロイなどの様々な概念を見ていきます

로드맵안내_넥스트

画像をクリックするとロードマップに移動できます。
> ロードマップリンク:https://link.onebitefe.com/r/68zgsv

シリーズ講義リンク
> 一口サイズに切って食べるReact :https://inf.run/v3XAj
>
一口サイズに切って食べるTypeScript : https://inf.run/FpLm4
>
一口サイズに切って食べるNext : https://inf.run/v3XAj

皆様の多くの愛のおかげで、本講義が書籍としても出版されました。心より感謝いたします🙇‍♂

  • 一口サイズで学ぶNext.js | Official Trailer

一口サイズで学ぶNext.js(15+)

15時間のボリュームで
Page RouterからApp Routerまで

💡Page Routerとは?

Next.js 13バージョン以前まで使用されていたルーター
直感的で安定した機能を提供

💡App Routerとは?

Next.js 13バージョン以降に公開された最新ルーター
ストリーミング、サーバーアクションなどの最新機能を提供

Next.js 13バージョンから新しく登場したApp Routerは、Page Routerの欠点を補完するために登場しました。
したがってPage Routerに対する理解がなければ、App Routerの新しいメカニズムについて簡単に理解することは困難です。

したがって本講義はPage Router(5時間)を素早く確認した後、App Router(10時間)を本格的に学習する順序で進行されます。これにより既存のPage Routerにどのような限界があったのか、そしてApp Routerがこのような限界をどのように克服するのかを深く理解できるようになります。

ただし、誤解しないでください。本講義はApp Routerを中心に進行されます。

静的な視覚資料はもうやめて
直感的なアニメーションと一緒に学ぶNext.js

Next.jsは複雑なメカニズムを持つ機能が多い方です。
したがって静的な視覚資料だけでは十分に説明することが困難です。
そのため本講義は以下のような直感的なアニメーションと共にお届けします

App Routerレイアウト関連の視覚資料

React Server Componentに関する視覚資料

React Server Componentに関する視覚資料

Client Router Cacheに関する視覚資料

実際の状況と最大限近く🚧
実習のための自社製作バックエンドサーバー提供

Next.jsの各種キャッシュ機能をより実戦に近い環境で確認するために
自作したバックエンドサーバーを提供いたします。

バックエンドサーバーAPI文書

講義構成

セクション1. Next.jsをご紹介します

本格的な学習に先立って、Next.jsという技術が何なのか
今日なぜこれほど多くの関心を集めているのかを見ていきます。

セクション1. Next.jsをご紹介します。

セクション1. Next.jsをご紹介します。

セクション2. Page Router 核心整理

(選択受講)プロジェクトと共にNext.js リリース初期から提供されたPage Routerについて素早く見ていきます。
同時にPage Routerにどのような不便さや技術的な限界があるのかも一緒に見ていきます。

セクション2. Page Routerをご紹介します

セクション2. Page Routerをご紹介します

セクション3. App Router 始める

話題の中心!App Routerについて見ていきます。App Routerとは何か、どのような技術的違いがあるのかを調べ、基本的な使用法についても一緒に見ていきます。

セクション3. App Routerを始める

セクション3. App Routerを始める

セクション4. データフェッチング

サーバーコンポーネントを活用したデータフェッチングについて見ていきます。
同時にNextが提供する様々なキャッシング(データキャッシュ、リクエストメモ化)についても一緒に見ていきます。

セクション4. データフェッチング

セクション4. データフェッチング

セクション5. ページキャッシング

App Routerバージョンのページキャッシングであるフルルートキャッシュクライアントルーターキャッシュについて詳しく見ていきます。
同時にページのキャッシングオプションを強制的に設定するルートセグメントオプションについても追加で見ていきます

セクション5. ページキャッシング

セクション5. ページキャッシング

セクション6. ストリーミング & エラーハンドリング

ページで素早く準備される部分からすぐにレンダリングできるよう支援するストリーミングについて見ていきます。
Loadingファイルを利用した方式とSuspenseを利用した2つの方式をすべて見ていきます。

またErrorファイルを利用したエラーハンドリングおよびページ復旧方法についても見ていきます。

セクション6. ストリーミングとエラーハンドリング

セクション6. ストリーミングとエラーハンドリング

セクション7. サーバーアクション

公開当時熱い反応を呼び起こしたサーバーアクションについて見ていきます。
サーバーアクションを利用してデータを追加したり削除したり、ローディング状態とエラー状態を処理する方法まで見ていきます。

セクション7. サーバーアクション

セクション7. サーバーアクション

セクション8. 高度なルーティングパターン(パラレル、インターセプト)

App Routerで新しく提供されるパラレル(並列)ルートインターセプティング(横取り)ルートについて見ていきます。
これを利用してユーザーのナビゲーションを妨げないよう、特定のページをモーダルで表示する機能を実装します。

セクション8. 高度なルーティングパターン

セクション8. 高度なルーティングパターン

セクション9. 最適化とデプロイ

画像、メタデータ、ページ、リージョンなどの最適化方法を見ていきます。
最適化されたプロジェクトをVercelにデプロイし、もう一度パフォーマンスを改善する作業を進めます。

セクション9. 最適化とデプロイ

セクション9. 最適化とデプロイ

一口シリーズの5つの原則

原則1. 直感的で豊富な視覚資料

同じ食べ物でも見た目が良いものの方がより美味しく感じられるように
同じ概念の説明でも、より直感的で魅力的な視覚資料の方が理解しやすいと思います。

そのため、アニメーションを含む直感的な視覚資料を作るために絶え間なく努力しました。

原則2. 親切さ

新しい用語や概念が登場する際、適当に説明して済ませたり、既にご存知だろうと勝手に判断したりしませんでした。講義を聞きながら別途Googleで検索する必要がないよう、最大限努力しました。

原則3. 蓋然性

受講生の皆様の興味を維持するため、講義中に新しい内容が登場する際、常に前の内容との関連性があるか、急に流れが途切れる感じを受けることはないか、常に蓋然性を考えながら講義を作成いたしました。

原則4. 良い発声と滑舌

長時間私の声をお聞きいただく分、良い発声と滑舌のために常に努力しています。
そのため2倍速で再生しても全て聞き取れるように講義を制作しました。

一度聞いてみてください!2倍速再生リンク

原則5. コミュニケーション

受講生専用コミュニティに集まって、お互いに知識やニュースを共有しながら成長します。

予想質問Q&A💬

Q. 講座の受講対象はどのようになりますか?

React.js、TypeScriptの基礎知識をお持ちの方に最適化された講義です。
ただし、TypeScriptの場合は途中で補足説明や補充学習資料を提供する予定ですので、
型を記述する部分を除けば無理なく受講していただけます。

Q. App Routerだけを学びたいのですが、わざわざPage Routerの部分も聞く必要がありますか?

Page Routerに熟練している方は、2セクションをスキップして3セクションから直接学習していただいても構いません。
ただし、Page Routerの限界点や特徴について十分に理解しているか、正確なメタ認知が必要です。

ポートフォリオ及び個人映像

INFCON2023 - TypeScriptはなぜそうなのか?

(書籍) 一口サイズに切って食べるReact紹介動画

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 一口シリーズの受講生の皆さん

  • Next.jsを初めて始める入門者の方々

  • 最新のNext.js(15+)バージョンで学んでみたい方

  • 親切で詳細な講義をお探しの方

前提知識、
必要でしょうか?

  • React.js (基礎)

  • TypeScript (基礎)

こんにちは
です。

30,718

受講生

1,719

受講レビュー

1,345

回答

4.9

講座評価

5

講座

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

안녕하세요 🙇‍♂

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

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

 

カリキュラム

全体

66件 ∙ (15時間 33分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

363件

5.0

363件の受講レビュー

  • justfix0109464님의 프로필 이미지
    justfix0109464

    受講レビュー 14

    平均評価 5.0

    5

    25% 受講後に作成

    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?)

    • rhs199813739님의 프로필 이미지
      rhs199813739

      受講レビュー 9

      平均評価 5.0

      5

      8% 受講後に作成

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

      • dev8678

        Đồng ý!!

    • bibipapa님의 프로필 이미지
      bibipapa

      受講レビュー 4

      平均評価 5.0

      5

      100% 受講後に作成

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

      • dla14347593님의 프로필 이미지
        dla14347593

        受講レビュー 4

        平均評価 4.3

        5

        92% 受講後に作成

        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

          受講レビュー 5

          平均評価 5.0

          5

          74% 受講後に作成

          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!

          期間限定セール

          ¥776,071

          23%

          ¥5,722

          winterloodの他の講座

          知識共有者の他の講座を見てみましょう!

          似ている講座

          同じ分野の他の講座を見てみましょう!