강의

멘토링

로드맵

NEW
Programming

/

Front-end

AIと一緒に学ぶNext.js

複雑なNext.jsの複数の概念を短時間で核心だけ学ぶことができます。Next.jsを初めて学ぶ方のための実務必須知識だけお教えします。フレームワーク講義だけで8年目を迎えるキャプテンパンギョのNext.js新規講義。「AI時代のフロントエンド開発者」のコーディングと学習方法を学ぶことができます!😊

55名 が受講中です。

  • captain
실습 중심
AI 코딩
next.js
react
cursor
JavaScript
React
Next.js
AI

こんなことが学べます

  • 最新Next.jsの必須概念 - SSR、Hydration、サーバー/クライアントコンポーネント、キャッシングなど

  • AI ツールでWebアプリケーションを素早く作る方法

  • Next.jsフォルダ/ファイル構造化とコンポーネント設計方法

  • Next.jsを使用する際に必ず知っておくべき実務のコツ

  • Next.jsの様々なレンダリング方式と内部動作原理

最近のようなAI時代にNext.jsはどのように学ぶべきでしょうか?

"Reactは使ったことがあるけど、Next.jsはどう使えばいいのかよく分からないです 🤔"
"求人情報を見ると応募条件にNext.jsが多いけど、必ず知っておくべきなのでしょうか? 😒"
"Next.jsでポートフォリオを作りたいけど、どうすればいいか分からないです 😢"

最近、大学生、就職準備生、実務開発者の方々をメンタリングしながら共通して聞いた話です。就職も簡単ではなく、AIが私たち開発者を代替するという見通しが多いのですが、本当にそうなるのでしょうか?

"AIツールで2倍速度を出すフロントエンド開発チーム作り - 2025年ネイバーフロントエンド開発者ミートアップ"

企業では依然として正確な技術知識と基礎を身につけた開発者を必要としています。AIツールを使う際も、曖昧に知っている人より正確に理解している人が作り出す成果物の品質がより優秀ですね。

"AI時代のFE開発者はどのような役割を果たすべきか? - 2025年FEConf開発リーダーパネルトーク"

今回の講義ではAI時代にフロントエンド開発者として何に集中すべきか、どのような技術を磨くべきかを明確に整理します。プロジェクトを一つ作成してデプロイまで行いながら、実務で必ず知っておくべき概念だけを素早く学ぶことができます。

この講義の特徴

📌 フレームワーク講義だけで8年目。現役フロントエンド開発者による体系的で面白いNext.jsカリキュラム

📌 バックエンドREST APIを直接呼び出しながら実際の実務環境と類似した状況を事前に体験してみます。

📌 理論30% 実習70%の比率。実装とエラーデバッグ中心の講義。作りながら学ぶのが一番頭に残りますからね。

📌 NPM、Node.js、ES6+、Gitなどの関連知識について無料講義と詳細な資料をすべて提供します。

📌AIツールを活用して学習時間を短縮し、必要不可欠な内容に集中しましょう。

인프런 교안

講義を聞いている最中も、そして講義を聞いた後も移動しながら気軽に見ることができるウェブ教材が提供されます😄

こんな方におすすめです

Next.jsを早く学ばなければなりません

Next.jsでプロジェクトを進める必要があるのに、一度も使ったことがありません。公式ドキュメントを全部見るには時間が足りないと感じている実務者

フロントエンド開発者として
就職したいです

企業が求める新人開発者のレベルはどの程度でしょうか?実務で必ず必要な能力が気になる
就職準備生

AIツールをどのように使うべきでしょうか?

フロントエンド開発者はAIツールをどのように使うべきでしょうか?大企業の実務ではAIツールをどのように使っているのか気になるジュニア開発者

受講後には

  • Next.jsでReactウェブアプリケーションを作成してデプロイすることに恐れはありません。

  • AIツールを使って素早くWebサービスを作成し、改良することが得意です。

  • SSR、Hydration、Server Component、Client Component、RSC Payloadなど複雑な概念を簡単に説明できます。

  • 実務プロジェクトのフォルダ構造を構成する方法とコンポーネント設計方法を知ることができました。

  • 面接で堂々と話せる就職ポートフォリオが一つできました。

こんな内容を学びます。

AIツールをフロントエンド開発に活用する方法

Next.jsのルーティング技法と内蔵コンポーネント

Next.js実務プロジェクトフォルダ/ファイル構造化方法

RSC、RCC、SSR、Hydration、レンダリングなどの高度な概念

この講義を作った人 👨‍💻

장기효 (캡틴판교)

受講前の参考事項

実習環境

  • 講義はMacOS基準で説明します。Windowsユーザーに必要なプログラムもすべてご案内します。

  • 開発ツールとしてCursorを使用します。VSCodeユーザーの方も講義を受講するのに問題ないと思います😄

学習資料

  • いつでもどこでも気軽に見ることができるNext.jsの教材を提供します。

  • 実務でよく使われるNext.js Page Router講座無料で提供しています。

  • JavaScript、NPM、Node.js、ES6+などの周辺知識はすべて無料講義とKind文書で提供します😊

前提知識および注意事項

  • JavaScriptの基本文法(変数、関数など)を知っていると良いです - JavaScript無料講義

  • Reactの基礎知識(jsx、コンポーネント、props)を知っていると良いです。- React基礎講座

  • その他の高度な知識はすべて講義で説明いたします😎

  • AIだけでNext.jsを学ぶ講座ではありません。技術を学ぶ際に実務者の観点からAIを活用する方法を学ぶことができます。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 最新のNext.jsを最大限早く学んで何かを作ってみたいウェブ開発者

  • 実務でどのようにAIツールを使用するのか気になるジュニア開発者

  • Next.jsで実務プロジェクトを進めなければならないフロントエンド/バックエンド開発者

  • ReactはやったことがあるけどNext.jsは一度もやったことがないフロントエンド開発者

  • フロントエンド採用公告の必須資格要件を身につけたい就職準備生

  • 実務サービス開発経験が気になる就職準備生

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

  • JavaScript

  • React

こんにちは
です。

48,359

受講生

4,711

受講レビュー

3,814

回答

4.9

講座評価

19

講座

인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳

カリキュラム

全体

64件 ∙ (7時間 53分)

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

期間限定セール

¥30,800

30%

¥5,290

captainの他の講座

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

似ている講座

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