
コードで学ぶReact 19 with Spring Boot APIサーバー
zk202308a5410
Spring Boot (ver3.4.x)で制作されるAPIサーバーと React 19 (with TypeScript) 連動プロジェクトを完成させる! バックエンドのポートフォリオにフロントエンドを適用! 実務者を対象に作成された講義(初心者向けの講義ではありません。)
中級以上
React, TypeScript, Spring Boot
従来のReact開発方式とNext.jsを利用して開発する方式は全く異なります。この講義は最新のNext.js 16の核心を貫き、「本物の」Next.jsらしい開発方式をお教えします。就職ポートフォリオから実務プロジェクトまで、パフォーマンスと効率の両方を掴む方法を体験してください。 Next.jsらしく開発しましょう!Next.jsの機能をどのように適用すべきか、実際の例題を作りながら体で学べるように構成されています。サーバーコンポーネントを中心に見て、サーバーアクションとキャッシング戦略などを理論よりも実際にコードを通してより速く学習します。 講義の目標はできるだけ早くNext.jsの雰囲気についていくことであるため、講義自体はJavaScriptを利用して進行します。しかし、各講義の例題はTypescriptで制作されたものを追加で授業資料として提供します。 2025年12月18日 - Next.js 16バージョンにアップデート
受講生 178名
難易度 中級以上
受講期間 無制限
学習した受講者のレビュー
5.0
양정헌
バックエンド側はコードのみ提供 フロントエンドでnext.jsフレームワークをどのように使うか、ディレクトリに対する基本的な理解をするのに役立ちました。理論的な部分と自分でもう一度作ってみる時間を持てば、体得するのに役立ちそうです
5.0
성낙현(낙자쌤)
初心者が簡単に真似してコーディングできるように講義が構成されています。説明も分かりやすく丁寧にしてくださり、とても良い講義です。 Next.jsを学ぼうとしている全ての方におすすめします。
5.0
뒤안길
講義が難しくなく、分かりやすく丁寧に説明してくれています。
Next.js 16を活用した実務レベルのフルスタックWebアプリケーション制作能力
ブラウザからAPIサーバーとDBまでフルスタック実習
サーバーアクション/ SSG/ ISR など Next.js / React 機能実習
認証処理:NextAuthでJWTトークンまで完璧に!
Reactの発展方向は、既存のブラウザでのみ動作する方式から脱却し、徐々にサーバー側の動作と統合される方式で動作します。Next.jsは、Reactが追求する方向を最も確実にサポートするフレームワークです。
最初はNext.jsを単純にルーティング処理が便利だという感覚で始めますが、サーバーで動作するコンポーネントを基盤に設計すれば、大規模アプリケーションを制作するにはNext.jsが最も適しています。
Reactはブラウザでのみ動作する方式で設計されていますが、Next.jsはサーバーサイドとブラウザの両方で動作できるため、新しいアプローチが必要です。Next.jsを適切に活用するためには、それに合った適切な開発方法が必要です。
このOnline Classesは、最小限の時間でNext.jsを体験し、適切な意思決定ができる能力を身につけることを目標に制作されました。このOnline Classesを受講した後、誰かがあなたに「React使う?Next.js使う?」と尋ねたら、あなたが「Next.js」と答えることが目標です。
講義の例題は、APIサーバーを別途分離して拡張を念頭に置いた構造で作成されます。APIサーバーは各機能別に制作されたコードを利用して実行し、これをNext.jsで活用する方式で構成します。Next.jsサーバーはサーバー側でデータを処理し、ブラウザではAPIサーバーを直接使用できない構造で、できるだけ実務に近い形態で構成します。
Backend(授業資料として提供され、講義内容には含まれません。)
Spring Boot
JPA
RestController
JWT
フロントエンド
Next.js 16(JavaScriptで作成し、TypeScriptは授業資料として提供します。)
NextAuth
SWR
Next.js 13以降のルーティング方式の変化、ReactのServer Componentの登場、Server Actionなど、Next.js 16には多くの変化があります。これらの機能をうまく活用すれば、従来のReactを使って開発するよりも、より速く様々な機能を実装することができます。
学習方法について悩む必要があります。
理論的な悩みは - 'SLOW'
JavaScriptで最速で作る - 'FAST'
デザインは最小限に素早くAIで処理 - 'FAST'
APIサーバーは提供されるソースコードで - 'FAST'
App Routingを活用してTodo例題を作る
ルーティング処理とページコンポーネント
layoutとloading処理、エラー処理などを学習します。
SSGを利用した静的ページ生成
定期的に自動更新されるページ(ISR)
検索機能の分離
自体認証とソーシャル認証(kakao)の処理
# JWTの処理とコンポーネント内での認証活用
APIサーバーとAccess Token、Refresh Tokenの自動更新方法
カスタムログイン/ログアウトページ
状態管理:SWRでカートデータを効率的に管理する
学習対象は
誰でしょう?
Next.jsの例を実務に適用したい人
APIサーバーと連携する開発が必要なフロントエンド開発者
Reactから次のステップに進みたい開発者
前提知識、
必要でしょうか?
Reactの基礎知識
REST方式の理解
2,349
受講生
183
受講レビュー
294
回答
4.8
講座評価
5
講座
「구멍가게코딩단(クモンガゲコーディング団)」は、2015年から開発関連職種の人々の集いのために作られたコミュニティです。
講義の進行は、現在「クモンガゲコーディング団(小さな店のコーディング団)」を運営しているクッキーマネージャーが担当しています。
2000年から開発を始め、ベンチャー企業、中小企業、大企業、フリーランスなどでの開発経験があります。
2010年代からは、主に企業向けの講義やコンサルティングを主な業務としています。
主な著書
コードで学ぶSpring Webプロジェクト
コードで学ぶSpring Boot
コードで学ぶReact
RESTful API サーバーの実装
Spring 6 レガシープロジェクト
Java Web開発ワークブック
React Native イン・アクション(翻訳)
開発/講義
サムスンSDS開発チーム勤務
SK顧客幸福株式会社 勤務
KT / SK / ポスデータ / 教保生命 / 新世界 / アシアナ / 国民健康保険公団など、企業向け講義
全体
48件 ∙ (8時間 58分)
講座資料(こうぎしりょう):
1. 講義紹介
07:12
2. Next.js の紹介
14:07
3. プロジェクト作成
17:24
4. pageコンポーネントの使用戦略
03:49
9. 一覧と照会移動
09:09
10. ローディング処理
08:24
11. ページ番号処理
12:49
12. 画面デザインの修正
11:03
13. Server Actionと登録
16:34
14. 登録完了
06:43
15. 修正処理
15:19
16. 削除処理
14:02
全体
15件
4.8
15件の受講レビュー
受講レビュー 8
∙
平均評価 5.0
受講レビュー 2
∙
平均評価 5.0
受講レビュー 75
∙
平均評価 5.0
受講レビュー 7
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!