강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Next.jsを深掘り:「使える開発者」から「理解して使う開発者」へ

一緒にソースコードを紐解きながら技術面接から実務設計まで、AI時代に必要な深い理解と自分なりの視点を身につけられるようにお手伝いします。Next.jsを単に"使ったことがある"開発者から、なぜそう使うのかを"理解する"専門家へと成長しましょう。

  • Boaz
웹개발
Nextjs
Next.js
React
TypeScript

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

こんなことが学べます

  • 技術面接でよく出るNext.jsの動作原理

  • 実務にすぐに適用できる設計原則

  • AI時代にも有効なNext.jsの技術哲学と本質

  • フレームワークを適切に選択・活用できる、自分なりの基準と観点

(既にアップロードしていたYouTube動画(現在非公開)と新しい動画(7本)を講義としてまとめたものです。
コレクションしたい方のみ受講申請をお願いします。🙏

Next.jsを「どのように」ではなく「なぜ」使うのかを説明できるようにサポートする講義です。

こんな方におすすめです

👨‍💻 Next.jsを使ったことはあるが、しっかりと理解したい開発者

慣れ親しんで使っているけれど、内部動作原理が気になる方

🎙 技術面接でいつも曖昧に説明してしまう方

概念は知っているが、質問を受けると整理された回答をするのが難しい方

🧭 AI時代、技術選択基準に不安を感じる実務者

トレンドに流されず、技術の本質を見抜きたい方

🎯 受講後には

  • Next.jsの核心概念(ルーティング、レンダリング、エラー処理など)を単純に使用するレベルを超えて、なぜそのように設計されたのかを説明できるようになります。

  • 技術面接でよく出る質問について、自分の言葉で明確かつ論理的に答えられる実力を身につけることができます。

  • 公式ドキュメントやチュートリアルだけでは得られなかったフレームワークの哲学と動作原理に基づく実務設計基準を作ることができます。

  • 「他人が作った構造に従って書く開発者」から、「自分の基準で構造を判断し説明できる開発者」へと成長することになります。

  • 変化するフロントエンド技術の流れの中でも、技術を見る視野と選択基準を自ら立てることができる自信を得ることができます。

この講義の核心的な強み

ソースコードを覗いて、動作原理を分析しましょう。

Next.jsの内部ソースコードを分析し、動作原理を説明します。これにより、使用していた機能が内部的にどのように動作するかを把握します。

公式ドキュメントを超えて、設計思想を扱います。

公式ドキュメントに出てくる機能を順序に従って辿りながら、その機能がなぜ登場し、どのような問題を解決するための選択だったのか、背景と設計哲学を見ていきます。

このような内容を学びます

公式ドキュメントの順序に従って進みながら、深い質問を通じて機能の登場背景と動作原理を学びます。

セクション (1) Routing

Next.jsのルーティング、単純にフォルダを分ける機能でしょうか?
このセクションではフォルダベースルーティングの哲学からApp Routerの構造、template.tsx、layout.tsx、、動作原理まで Next.js ルーティングの本質と設計意図を深く探求します。

セクション (2) Data fetching

Next.jsでデータフェッチング、fetch()の位置だけ気にすればいいでしょうか?
このセクションではサーバー中心fetchの登場背景から、並列処理の限界、Server Componentとの連携、Server ActionまでNext.jsが提案するデータフローの方向性とその理由を一緒に見ていきます。

セクション (3) Rendering

CSR、SSR、SSG、ISR、そしてStreamingまで...レンダリング方式が多くなるほど「何が正解なのか」迷いやすいと思います。
このセクションではNext.jsのレンダリング戦略がどのような背景で登場したのか
そして各方式が実際のプロジェクトでどのように活用できるのかを整理してみます。

ご質問はありますか?

Q. この講義はNext.jsを初めて触る開発者でも受講できますか?

この講義は中級以上の実務フロントエンド開発者を対象としています。Next.jsを一、二度使った経験があり、単純な使用を超えて「なぜこのように使わなければならないのか」を考えてみた方に最も適しています。

Q. 技術面接の準備にも役立ちますか?

もちろんです!よく出る技術面接の質問について公式ドキュメント以上の深さで、実際のコードと構造に基づいて説明できる能力を身につけることができます。

Q. 実務にすぐに適用できますか?

実務で気になる質問に回答する形で一編一編を制作しました。これを通じて設計構造を組む時や、コンポーネント構成を悩む時に判断の基準を立てることができる観点と哲学を提供します。

Q. 講義では直接コーディング実習も行いますか?

この講義はコードを真似して機能を実装するチュートリアルというよりは、動作原理と設計哲学を理解することに焦点を当てています。そのため、これを支援するためのサンプルコードを提供します。

サンプルコードを提供する目的は、直接実装する実習よりも概念と構造を深く把握し実務に応用することです。

Q. App Routerを扱う講義ですか?Pages Routerも含まれますか?

主な内容はApp Routerを中心に構成されており、ルーティング構造変化の哲学と違い、そしてなぜそのように変わったのかを深く扱います。
Pages Routerの使用経験があれば、App Routerに移行するのに大きな助けになるでしょう。

受講前の参考事項

実習環境

  • Node.jsとBrowser

  • #Next.js #React #Typescript


質問と回答

  • https://discord.gg/fpCrBJWCtz

    講義に関する質問だけでなく、技術について深く探求して同僚たちと一緒に議論し、自分の観点を身につけたいと思っているProduct Engineerたちが集まって、Next.jsに関するすべての質問について一緒に勉強し答えるチャンネルです😊

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Next.js は使ってきたけど、技術面接だと言葉に詰まる方

  • 「とりあえず書く開発者」から「深く理解して書く専門家」へと成長したい方

  • Next.js ソースコードを分析したいのに、どこから始めればいいか途方に暮れている方

  • AI時代、本質的なフロントエンドエンジニアの競争力を身につけたい方

こんにちは
です。

213

受講生

18

受講レビュー

15

回答

4.7

講座評価

1

講座

안녕하세요. Boaz 입니다.
총 4번의 이직을 거치며 다양한 스타트업을 경험 했고, 라인에서 일하다 얼마전 퇴사한 8년 차 프론트엔드 엔지니어입니다.

다양한 프로젝트에서 Next.js 를 활용하며, 저는 많은 시행착오를 겪었어요.
특히 실무에 적용하며 더 좋은 구조를 고민할 때, “왜 이렇게 구성해야 하지?”, “이 기능을 써도 되는 상황인가?” 같은 질문들이 쏟아졌고, 그때부터 단순한 사용법보다 '등장 배경과 동작 원리의 이해'가더 중요하다는 걸 느꼈어요.

이 강의는 단순히 Next.js를 ‘쓸 수 있게’ 만드는 것이 목적은 아니어요.
“왜 이렇게 설계 되었는가?”, “실무에서는 어떤 기준으로 선택해야 하는가?”를 함께 고민하고 싶은 분들을 위해 만들었어요.

단순히 쓸 줄 아는데 그치고 싶지 않았던 과거의 저와 같은 여러분에게, 이 강의가 정리된 관점과 기준을 제시해주는 나침반이 되었으면 합니다 😄

カリキュラム

全体

31件 ∙ (9時間 51分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

18件

4.7

18件の受講レビュー

  • nyamnyamgood님의 프로필 이미지
    nyamnyamgood

    受講レビュー 14

    平均評価 5.0

    5

    31% 受講後に作成

    単にコードの書き方だけを教える初級講義とは次元が違います。Next.jsのルーティング、データフェッチ、レンダリングに対する哲学的背景と技術的実装方式を深く扱っています。特に「Next.jsのルーティングはどう実装したのか?」、「なぜDynamic Routeのparamsはpromiseに変わったのか?」のようなテーマは、単に使い方ではなく「なぜ」そう設計されたのかを理解させてくれます。実務でむやみに「use client」でCSRばかり使っていた私に、Server Componentの本質と最適化ポイントを明確に理解させてくれた唯一の講義です。今になってやっとNext.jsを 제대로(ちゃんと)活用できるようになった気がします。次の講義も本当に楽しみです!

    • jihunkim6251444님의 프로필 이미지
      jihunkim6251444

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      これまでNext.jsを利用して様々なプロジェクトを進めてきましたが、自分自身が使っているフレームワークに対する理解が不足しているのではないかという疑問が常にありました。しかし、この講義を受講し、Next.jsというReactベースのフレームワークをなぜ使う必要があるのかという明確な理解が頭に刻み込まれたように思います。 特に、サーバールーティングとサーバーコンポーネントの概念は公式ドキュメントを見ても理解できない部分が多かったのですが、そういった部分を実際のサンプルコードを通じて学び、さらに講師の最大限直感的な説明を通して簡単に理解することができました。 これまではプロジェクトをしながら、表面的な理解だけで機能を実装してきたように感じていました。しかし、これからはどのような機能を実装する際にも「なぜこの方式の方がより良い選択なのか?」「この構造の長所と短所は何なのか?」を共に悩むことができるようになりました。おかげでNext.jsに対する恐れも消え、さらに、どのようなバージョンでも新しい機能が登場しても簡単に吸収できるだろうという自信も生まれました。 この講義は表面的な使い方ではなく、本質的な原理と設計意図を見通したい方にぜひお勧めしたい講義です。Next.jsをしっかり理解したい開発者であれば、私が受講したこの講義が転換点になり得ると確信しています。

      • dlawnsdlekd7259님의 프로필 이미지
        dlawnsdlekd7259

        受講レビュー 1

        平均評価 5.0

        5

        20% 受講後に作成

        最高の講義です。これほど深みのある講義はInflearnで初めて見ました。Next.jsがなぜこのように設計されているのか納得できました。ただあれこれ触ってみて意味のない勉強をしても、少し時間が経つと記憶に残りません。なぜこのように設計されているのかを知りながら勉強すると、記憶にも長く残ります。自然と面接対策も兼ねられますし。プロジェクトを真似て作るような講義にお金を多く無駄にした者として、本当に推薦する深みのある講義です。

        • near님의 프로필 이미지
          near

          受講レビュー 25

          平均評価 5.0

          5

          10% 受講後に作成

          Next.jsをただ使ってみたことがあるという段階から、原理を理解する段階にアップグレードしてくれる講義でした。 技術は常に速く変化しますが、本質的な原理を理解すれば変化にも容易に適応できますね。 Next.jsを使用しているものの、「なぜこのような構造が必要なのだろうか?」という疑問を持つ方におすすめです!良い講義をありがとうございます 🥰

          • taegikim4323님의 프로필 이미지
            taegikim4323

            受講レビュー 1

            平均評価 5.0

            5

            100% 受講後に作成

            • boaz
              知識共有者

              こんにちは taegi.kim さん、一緒に勉強していただき、受講レビューを書いていただきありがとうございます。特に100%受講後に書いていただき、さらに感謝しています :)

          ¥18,863

          似ている講座

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