강의

멘토링

로드맵

Inflearn brand logo image
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時代、本質的なフロントエンドエンジニアの競争力を身につけたい方

こんにちは
です。

191

受講生

12

受講レビュー

14

回答

4.6

講座評価

1

講座

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

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

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

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

カリキュラム

全体

31件 ∙ (9時間 51分)

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

受講レビュー

全体

12件

4.6

12件の受講レビュー

  • 냠냠굿님의 프로필 이미지
    냠냠굿

    受講レビュー 14

    平均評価 5.0

    5

    31% 受講後に作成

    단순히 코드 작성법만 알려주는 초급 강의와는 차원이 다릅니다. Next.js의 라우팅, 데이터 페칭, 렌더링에 대한 철학적 배경과 기술적 구현 방식을 깊이 있게 다루고 있어요. 특히 'Next.js 라우팅은 어떻게 구현했을까?', '왜 Dynamic Route의 params는 promise로 바뀌었나?' 같은 주제는 단순히 사용법이 아닌 '왜' 그렇게 설계되었는지 이해할 수 있게 해줍니다. 실무에서 무작정 'use client'로 CSR만 사용하던 제게 Server Component의 본질과 최적화 포인트를 명확히 이해시켜준 유일한 강의입니다. 이제야 Next.js를 제대로 활용할 수 있게 된거같습니다. 다음 강의도 정말 기대가 됩니다!

    • jihunkim625님의 프로필 이미지
      jihunkim625

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      지금껏 Next.js를 이용해 여러 프로젝트를 진행해왔었는데, 내가 쓰는 프레임 워크에 대한 이해가 부족하지는 않은가 하는 의문이 항상 있었습니다. 하지만 해당 강의를 수강하고, Next.js라는 리액트 기반 프레임워크를 왜 써야 하는지에 대한 명확한 이해가 머리에 각인된 것 같습니다. 특히, 서버 라우팅과 서버 컴포넌트 개념은 공식 문서를 봐도 이해가 안 가는 부분이 많았는데, 그런 부분을 실제 예제 코드를 통해 배우고 또 강사님의 최대한 직관적인 설명을 통해 쉽게 이해할 수 있었습니다. 그 동안은 프로젝트를 하면서 겉핥기 식으로만 기능을 구현해왔다는 생각이 들었습니다. 그러나 이제는 어떤 기능을 구현할 때에도 '왜 이 방식이 더 나은 선택일까?', '이 구조의 장단점은 무엇일까?'를 함께 고민할 수 있게 되었습니다. 덕분에 Next.js에 대한 두려움도 사라졌고, 더 나아가 어떤 버전이든 새로운 기능이 등장하더라도 쉽게 흡수할 수 있을 것 같은 자신감 역시 생겼습니다. 해당 강의는 표면적인 사용법이 아닌, 본질적인 원리와 설계 의도를 꿰뚫고 싶은 분들께 꼭 추천하고 싶은 강의입니다. Next.js를 제대로 이해하고 싶은 개발자라면 제가 수강한 해당 강의가 전환점이 될 수 있다고 확신합니다.

      • Boaz
        知識共有者

        안녕하세요 먼저 전부 수강해주시고, 수강평까지 작성해주셔서 더욱 감사합니다. 혹시 괜찮으시면 강의에 대한 피드백을 더 자세히 들을 수 있을까요? 좋은 점 아쉬운 점 무엇이든 나눠주시면 개선하는데 큰 도움이 될것 같습니다. 피드백 관련해서는 아래 링크에서 예약해주셔도 좋습니다. https://cal.com/p.e.c/career-coaching 혹시 메일로 주시고 싶으시다면 hkc7180@gmail.com 도 좋습니다. 다시한번 수강해주셔서 감사드립니다.

    • dlawnsdlekd님의 프로필 이미지
      dlawnsdlekd

      受講レビュー 1

      平均評価 5.0

      5

      20% 受講後に作成

      최고의 강의입니다. 이 정도로 깊이 있는 강의는 인프런에서 처음 봅니다. Next.js가 왜 이렇게 설계된 건지 납득할 수 있었습니다. 그냥 이것저것 써보면서 의미 없는 공부를 하면 시간이 조금만 지나도 기억에 남지 않습니다. 왜 이렇게 설계되었는지를 알아가면서 공부하면 기억에도 오래 남습니다. 자연스럽게 면접 대비도 같이 되고요. 프로젝트 따라만들기 강의 같은 거에 돈낭비를 많이 한 사람으로서 정말 추천하는 깊이 있는 강의입니다.

      • Boaz
        知識共有者

        안녕하세요 먼저 전부 수강해주시고, 수강평까지 작성해주셔서 더욱 감사합니다. 혹시 괜찮으시면 강의에 대한 피드백을 더 자세히 들을 수 있을까요? 좋은 점 아쉬운 점 무엇이든 나눠주시면 개선하는데 큰 도움이 될것 같습니다. 피드백 관련해서는 아래 링크에서 예약해주셔도 좋습니다. https://cal.com/p.e.c/career-coaching 혹시 메일로 주시고 싶으시다면 hkc7180@gmail.com 도 좋습니다. 다시한번 수강해주셔서 감사드립니다.

    • 조용준 (Near)님의 프로필 이미지
      조용준 (Near)

      受講レビュー 25

      平均評価 5.0

      5

      10% 受講後に作成

      Next.js를 단순히 써본 적 있다에서 원리를 꿰뚫는 단계로 업그레이드해주는 강의였습니다. 기술은 계속 빠르게 변하지만, 본질적인 원리를 이해하면 변화에도 쉽게 적응할 수 있더라구요. Next.js를 사용하고 있지만 '왜 이런 구조가 필요할까?' 하는 의문을 가진 분들께 추천드려요! 좋은 강의 감사합니다 🥰

      • Jay LEE님의 프로필 이미지
        Jay LEE

        受講レビュー 1

        平均評価 3.0

        3

        100% 受講後に作成

        • Boaz
          知識共有者

          안녕하세요 Jay LEE 님 먼저 수강해주시고, 수강평까지 작성해주셔서 감사합니다. 혹시 괜찮으시면 강의에 대한 피드백을 더 자세히 들을 수 있을까요? 좋은 점 아쉬운 점 무엇이든 나눠주시면 개선하는데 큰 도움이 될것 같습니다. 피드백 관련해서는 아래 링크에서 예약해주셔도 좋습니다. https://cal.com/p.e.c/career-coaching 혹시 메일로 주시고 싶으시다면 hkc7180@gmail.com 도 좋습니다. 다시한번 수강해주셔서 감사드립니다.🤗

      ¥18,072

      似ている講座

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