一口シリーズの第3作！世界で最も親切で、詳細なNext.js講義です。App Routerだけでなく、Page Routerについてもプロジェクトを通して学びます。
学習した受講者のレビュー
5.0
Next
Next.jsの基本的な概念から高度な概念まで幅広く学ぶことができました。 特に、理解しにくく感じられる複雑なテーマを視覚的な素材やアニメーションで簡単に理解できました。 講義の内容が段階的によく構成されており、入門者も無理なく従うことができるようで、中級以上の開発者たちも十分に学ぶ点が多い講義だと思われます。 また、単に文法を学ぶのにとどまらず、Next.jsの動作原理や内部メカニズム、SSR、SSG、ISRなど、さまざまな方式の理論的な部分を深く扱いながらも、実際のプロジェクトに適用できる方法も取り上げており、これはたくさんありました。 講師の注意深いレッスンの準備と努力のおかげで、Next.jsを学ぶプロセスは本当に楽しくて有益でした。 誠にありがとうございます！
5.0
itjustbong
授業の満足度が高かったので、感想を投稿します! 私はフロントエンド開発者ですが、長い間 Page Router スタックに留まっていました。 App Router に挑戦しなかったわけではありませんが、既存の慣れからか、ついつい Page Router を使用していました... しかし、偶然この授業を聞いて、最新のトレンドに追いつこうという考えが浮かんだのですが、予想以上に品質が高く、私がついつい Page Router に戻ってしまう理由の 1 つは、App Router を正しく理解していなかった部分も大きかったようです。 この授業を聞いて、App Router がどのように機能するかを理解し、小さなプロジェクトを進めることで、App Router に対する自信も得ることができました。 今後の授業で望むことは、App Router で設定を進めると、デザイン システムやその他のさまざまなライブラリが正しく機能せず、設定に苦労する場合があるのですが、このような設定をすべて含む実践編 (または上級編) もあればいいと思います! ありがとうございました!
5.0
dla1434
もともと受講評はうまくいかないのですが…今回の講義は満足度が良すぎて残ります。 一度私はいくつかの次の講義を見ましたが、講義で説明するのが難しい部分はこう書けばいいのですが、使い方を教えてくれます。できない部分がありました。 この講義を見て大部分が理解できました 一度説明や資料もわかりやすくなっていて 理論を説明した後、もう一度実習で直接見せてください。 今回の講義は、私が見たチョンファンの講義の中でも最高だと思います。 講義でした。 既存の講義も良かったが、多くの悩みやフィードバックを反映した結果だと と思われます。 次の講義もとても楽しみです~~ 次はnextの実戦編のような講義も制作すればいいと思います。
最新のNext.jsの概念について見ていきます。
Page RouterからApp Routerまで、ほとんどの概念を見ていきます。
サーバーコンポーネント、ページルーティング、レイアウト設定、データフェッチ、ストリーミング、デプロイなどのさまざまな概念を見ていきます
🎁 한입シリーズ6つの講義すべてに35%～95%割引クーポンをプレゼントします。
🔗 5周年記念割引クーポンを受け取る：https://link.onebitefe.com/r/ys47sw
画像をクリックするとロードマップに移動できます。
> ロードマップリンク：https://link.onebitefe.com/r/68zgsv
シリーズ講座リンク
> ひとくちサイズで学ぶReact：https://inf.run/v3XAj
> ひとくちサイズで学ぶTypeScript： https://inf.run/FpLm4
> ひとくちサイズで学ぶNext： https://inf.run/v3XAj
皆さまからのたくさんのご愛顧のおかげで、本講義が書籍としても刊行されました。心より感謝申し上げます 🙇♂
一口サイズで学ぶNext.js | Official Trailler
💡 Page Router란?
Next.js 13バージョン以前まで使われていたルーター
直感的で安定した機能を提供
💡 App Routerとは？
Next.js 13バージョン以降に公開された最新ルーター
ストリーミング、サーバーアクションなどの最新機能を提供
Next.js 13バージョンから新たに登場したApp Routerは、Page Routerの欠点を補うために登場しました。
AIがコードを代わりに書いてくれる時代でも、 Page Routerへの理解なしにはApp Routerの仕組みを正しく扱うことは困難です。
したがって本講義は、Page Router（5時間）を手短に確認した後、App Router（10時間）を本格的に学ぶ順序で進めます。これにより、従来のPage Routerにはどのような限界があり、App Routerがその限界をどのように克服しているのかを深く理解できるようになります。
⚠ ただし、誤解しないでください。本講義はApp Routerを中心に進めます。
Next.jsには複雑な仕組みを持つ機能が数多くあります。
そのため、静的な視覚資料だけでは十分に説明することが難しいです。
本講義では、以下のような直感的なアニメーションとともに進めます
React Server Componentに関する視覚資料
Client Router Cacheに関する視覚資料
Next.jsのさまざまなキャッシュ機能をより実践に近い環境で確認できるよう、
自社開発のバックエンドサーバーをご用意しています。
バックエンドサーバーAPIドキュメント
本格的な学習に入る前に、Next.jsとはどのような技術なのか
今日なぜこれほど多くの注目を集めているのかを見ていきます。
セクション1. Next.jsを紹介します。
セクション1. Next.jsを紹介します。
（選択受講）プロジェクトとともに、Next.jsのリリース初期から提供されているPage Routerについて簡単に確認します。
同時に、Page Routerにどのような不便さや技術的な限界があるのかについても併せて見ていきます。
セクション2. Page Routerをご紹介します
セクション2. Page Routerを紹介します
話題の中心！App Routerについて見ていきます。App Routerとは何か、どのような技術的な違いがあるのかを学び、基本的な使い方についても併せて見ていきます。
セクション3. App Routerを始める
セクション3. App Routerを始める
サーバーコンポーネントを活用したデータフェッチについて見ていきます。
同時に、Nextが提供するさまざまなキャッシュ（データキャッシュ、リクエストメモ化）についても併せて見ていきます。
セクション4. データフェッチ
セクション4. データフェッチ
App Router版のページキャッシュであるフルルートキャッシュとクライアントルーターキャッシュについて詳しく見ていきます。
同時に、ページのキャッシュオプションを強制的に設定するルートセグメントオプションについてもさらに詳しく見ていきます。
セクション5. ページキャッシュ
セクション5. ページキャッシュ
ページ内ですぐに準備できた部分からレンダリングできるようにするストリーミングについて見ていきます。
Loadingファイルを利用する方法と、Suspenseを利用する2つの方法をどちらも確認します。
また、Errorファイルを利用したエラーハンドリングおよびページの復旧方法についても見ていきます。
セクション6. ストリーミングとエラーハンドリング
セクション6. ストリーミングとエラーハンドリング
公開当時に大きな反響を呼んだサーバーアクションについて見ていきます。
サーバーアクションを利用してデータを追加・削除し、ローディング状態やエラー状態を処理する方法まで見ていきます。
セクション7. サーバーアクション
セクション7. サーバーアクション
App Routerで新たに提供されるパラレル（並列）ルート & インターセプティング（割り込み）ルートについて見ていきます。
これを利用して、ユーザーのナビゲーションを妨げないように特定のページをモーダルで表示する機能を実装します。
セクション8. 高度なルーティングパターン
セクション8. 高度なルーティングパターン
画像、メタデータ、ページ、リージョンなどの最適化方法を見ていきます。
最適化されたプロジェクトをVercelにデプロイし、さらにパフォーマンスを改善する作業を行います。
セクション9. 最適化とデプロイ
セクション9. 最適化とデプロイ
同じ料理でも見た目の良いもののほうがおいしく感じられるように
同じ概念の説明でも、より直感的で魅力的な視覚資料のほうが理解しやすいと考えています。
そのため、アニメーションを含む直感的な視覚資料を作成するために、たゆまぬ努力をしました。
新しい用語や概念が登場した際には、いい加減に説明して先に進んだり、すでにご存じだろうと早合点したりしませんでした。講義を受講しながら、別途Google検索をしていただく必要がないよう、できる限り努めました。
受講生の皆様の興味を維持するため、講義中に新しい内容が登場する際は、常にそれまでの内容との関連性があるか、突然流れが途切れたように感じられないかを考えながら講義を作成しました。
長時間にわたって私の声をお聞きいただくことになるため、良い発声と滑舌を心がけています。
そのため、2倍速で再生してもすべて聞き取れるように講義を制作しました。
一度聞いてみてください！2倍速再生リンク
受講生専用コミュニティに集まり、お互いに知識や情報を共有しながら成長します。
NAVERカフェ：https://cafe.naver.com/winterlood
オープンチャットルーム：授業資料で参加リンクをご確認ください
React.jsとTypeScriptの基礎知識がある方に最適化された講義です。
ただし、TypeScriptについては随所で補足説明や補足学習資料をご用意する予定ですので、
型を記述する部分を除けば、無理なく受講していただけます。
Page Routerの経験者であれば、2セクションは飛ばして3セクションからすぐに学習しても構いません。
ただし、Page Routerの限界や特徴について十分に理解しているか、正確にメタ認知する必要があります。
INFCON2023 - TypeScriptはなぜそうなのか？
（書籍）ひと口サイズに切って食べるReact紹介動画
学習対象は
誰でしょう？
一口シリーズの受講生の皆さん
Next.jsを初めて始める初心者の方々
最新のNext.jsバージョンで学んでみたい方
親切で詳しい講義をお探しの方
前提知識、
必要でしょうか？
React.js（基礎）
TypeScript（基礎）
インフラーン認証
キャリア認証
45,451
受講生
3,541
受講レビュー
1,797
回答
4.9
講座評価
34
講座
何でもわかりやすく説明する方法はある！
YouTube：https://link.onebitefe.com/r/8n6pxm
📚 書籍
🏆 アワード
2025年インフラン年末アワード ベストセラー受賞
2024年インフラン年末アワード 受講生PICK受賞
2023 인프런年末アワード 受講生PICK受賞
📹講義
一口サイズで切って食べるバイブコーディング
一口サイズでつまみ食いするReact.js実践プロジェクト - SNS編
ひと口サイズでかじって学ぶ Next.js
一口サイズに切って食べるTypeScript
一口サイズでかじるReact
全体
66件 ∙ (15時間 33分)
講座資料:
11. 2.3) ナビゲーティング
07:12
12. 2.4) プリフェッチ
14:35
13. 2.5) API ルート
06:13
14. 2.6) スタイリング
09:16
20. 2.12) SSR 2. 実習
27:15
21. 2.13) SSG 1. 紹介
06:14
27. 2.19) SEO設定する
15:06
28. 2.20) デプロイする
12:18
全体
642件
5.0
642件の受講レビュー
受講レビュー 4
∙
平均評価 4.3
5
もともと受講評はうまくいかないのですが…今回の講義は満足度が良すぎて残ります。 一度私はいくつかの次の講義を見ましたが、講義で説明するのが難しい部分はこう書けばいいのですが、使い方を教えてくれます。できない部分がありました。 この講義を見て大部分が理解できました 一度説明や資料もわかりやすくなっていて 理論を説明した後、もう一度実習で直接見せてください。 今回の講義は、私が見たチョンファンの講義の中でも最高だと思います。 講義でした。 既存の講義も良かったが、多くの悩みやフィードバックを反映した結果だと と思われます。 次の講義もとても楽しみです~~ 次はnextの実戦編のような講義も制作すればいいと思います。
受講レビュー 4
∙
平均評価 5.0
受講レビュー 15
∙
平均評価 5.0
5
Next.js講義は？イ・ジョンファン。 React.js講義図？イ・ジョンファン。 TypeScript講義も？イ・ジョンファン。 公式です。暗記してください。 視覚的な資料と辞書で頭に打ち寄せてくれます。 これでも決済しない？毒する読解。 以下の質問に答えるのが難しい、または混乱する概念がある場合は、お支払いください。役に立ちます。 1. ReactとNext.jsを使用したときの各違いをTTV、TTIの観点から説明してください。 2. Next.js プリレンダリングについて説明してください。 3. Next.js プリフェッチングについて説明してください。 4. Next.jsハイドレーションはどの時点で行われますか？ 5. Next.jsデータフェッチはどの時点で行われますか？ 私は知りませんでしたが、今答えることができます。 ビジュアル素材で親切に惜しみません。 忘れてしまうと復習次元に持ってきて頭の中に殴ってくれます。 もともとこれまで後期に残そうとはしませんでした。 本当の怖い点はまだ講義の序盤部なのにこの程度収穫が得られるということですね。 （もう悩んでやめて決済に行きましょう。これでもしない方はいないでしょ？）
受講レビュー 7
∙
平均評価 5.0
5
授業の満足度が高かったので、感想を投稿します! 私はフロントエンド開発者ですが、長い間 Page Router スタックに留まっていました。 App Router に挑戦しなかったわけではありませんが、既存の慣れからか、ついつい Page Router を使用していました... しかし、偶然この授業を聞いて、最新のトレンドに追いつこうという考えが浮かんだのですが、予想以上に品質が高く、私がついつい Page Router に戻ってしまう理由の 1 つは、App Router を正しく理解していなかった部分も大きかったようです。 この授業を聞いて、App Router がどのように機能するかを理解し、小さなプロジェクトを進めることで、App Router に対する自信も得ることができました。 今後の授業で望むことは、App Router で設定を進めると、デザイン システムやその他のさまざまなライブラリが正しく機能せず、設定に苦労する場合があるのですが、このような設定をすべて含む実践編 (または上級編) もあればいいと思います! ありがとうございました!
受講レビュー 9
∙
平均評価 5.0
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう！
新規会員登録で25%OFF
￥4,533
25%
￥6,043
![[改訂3版] Node.js教科書 - 基本からプロジェクト実習まで講義サムネイル](https://cdn.inflearn.com/public/courses/330181/cover/47e0125e-75ad-4946-96d3-54bbc444a188/330181-eng.jpg?w=420)
![[フルスタック完成] Supabaseでウェブサイト3つをクローンする (Next.js 14)講義サムネイル](https://cdn.inflearn.com/public/courses/332907/cover/2975d3d7-5dcc-4e2a-977c-98b11134cfb6/332907.jpg?w=420)
