Next.js 15: フルスタック開発

Name: Next.js 15: フルスタック開発
Price: 66000 KRW

従来のReact開発方式とNext.jsを利用して開発する方式は全く異なります。この講義は最新のNext.js 15の核心を貫き、'本当の'Next.jsらしい開発方式をお教えします。就職ポートフォリオから実務プロジェクトまで、パフォーマンスと効率を両方とも掴む方法を体験してください。 Next.jsらしく開発しましょう！Next.jsの機能をどのように適用すべきかを実際の例題を作りながら体で学べるように構成されています。サーバーコンポーネントを中心に見て、サーバーアクションとキャッシング戦略などを理論よりも実際にコードを通してより速く学習します。講義の目標は最大限速くNext.jsの雰囲気についていくことであるため、講義自体はJavaScriptを利用して進行します。しかし各講義の例題はTypescriptで制作されたものを追加で授業資料として提供します。

（5.0）受講レビュー 8件

受講生 131名

zk202308a5410

Nextjs

fullstack

react.js

javascript

SpringBoot

JavaScript

React

JPA

Next.js

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

こんなことが学べます

Next.js 15を活用した実務レベルのフルスタックWebアプリケーション制作能力
ブラウザからAPIサーバーとDBまでフルスタック実習
サーバーアクション/ SSG/ ISR など Next.js / React 機能実習
認証処理：NextAuthでJWTトークンまで完璧に！

大規模なアプリケーションをReactで制作するなら、Next.jsが最適です。

Reactの発展方向は、従来のブラウザでのみ動作する方式から脱却し、徐々にサーバーサイドの動作と統合される方式で動作します。Next.jsは、Reactが追求する方向を最も確実にサポートするフレームワークです。

最初はNext.jsは単純にルーティング処理が便利だという感覚で始まりますが、サーバーで動作するコンポーネントを基盤として設計すれば、大規模アプリケーションを制作するにはNext.jsが最も適しています。

この講義を制作した理由

Reactはブラウザでのみ動作するように設計されていますが、Next.jsはサーバーサイドとブラウザの両方で動作できるため、新しいアプローチが必要です。Next.jsを適切に活用するためには、それに適した適切な開発方法が必要です。

この講義は最小限の時間でNext.jsを体験し、適切な意思決定ができる能力を身につけることを目標に制作されました。この講義を受講した後に誰かがあなたに「React使う？Next.js使う？」と聞いたら、あなたが「Next.js」と答えることが目標です。

サンプルシステム構成

講義の例題は、APIサーバーを別途分離して拡張を念頭に置いた構造で作成されます。APIサーバーは各機能別に制作されたコードを利用して実行し、これをNext.jsで活用する方式で構成します。Next.jsサーバーはサーバー側でデータを処理し、ブラウザではAPIサーバーを直接使用できない構造で、最大限実務に近い形態で構成します。

講義で使用する技術

Backend (授業資料として提供され、講義内容には含まれません。)

Spring Boot
JPA
RestController
JWT

FrontEnd

Next.js 15（JavaScriptで作成し、TypeScriptは授業資料として提供します。）
NextAuth
SWR

Next.js 15

Next.js 13以降のルーティング方式の変化、ReactのServer Componentの登場、Server Actionなど、Next.js 15の多くの変化があります。これらの機能をうまく活用すれば、既存のReactを利用して開発するよりも、より早く様々な機能を実装することができます。

Slow then Fast

学習方法について悩む必要があります。

理論的な悩みは - 'SLOW'
JavaScriptで最速で作る - 'FAST'
デザインは最小限で素早くAIで処理 - 'FAST'
APIサーバーは提供されるソースコードで - 'FAST'

講義で作成する例題と内容

Todoサンプル：アプリルーティングでCRUD、ページング完全マスター

App Routingを活用してTodo例題作り
ルーティング処理とページコンポーネント
layoutとloading処理、エラー処理などを学習します。

商品管理：SSG/ISRでパフォーマンスとSEOを同時に実現する方法

SSGを利用した静的ページ生成
定期的に自動更新されるページ（ISR）
検索機能の分離

認証処理：NextAuthでJWTトークンまで完璧に！

自体認証とソーシャル認証（kakao）処理
JWT処理とコンポーネント内認証活用
APIサーバーとAccess Token、Refresh Token自動更新方法
カスタムログイン/ログアウトページ

状態維持：SWRでカートデータを効率的に管理する

Next.jsにおけるクライアント中心の開発手法
Next.js内で呼び出し可能なルート処理
SWRを利用してサーバーデータを複数のコンポーネントが共有する方法

こんな方に
おすすめです

学習対象は
誰でしょう？

Next.jsの例を実務に適用したい人
APIサーバーと連携する開発が必要なフロントエンド開発者
Reactで次のステップに進みたい開発者

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

React基礎知識
REST方式に対する理解

こんにちは
です。

2,061

受講生

135

受講レビュー

266

回答

4.8

講座評価

講座

구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.

강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 매니저가 진행하고 있습니다.

2000년부터 개발을 시작하였고 벤처 기업, 중소 기업, 대기업 / 프리랜서 등의 개발 경험을 가지고 있습니다.

2010년대 부터는 주로 기업체 강의와 컨설팅을 주요 업무로 하고 있습니다.

ㄴ네이버 카페

주요 저서

코드로 배우는 스프링 웹 프로젝트

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

KT / SK / 포스데이터 / 교보 생명 / 신세계 / 아시아나 / 건강보험 관리공단 등등 기업체 강의

カリキュラム

全体

44件 ∙ (8時間 50分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．Next.js開発準備

4件 ∙ (44分)

セクション 2．Todo API サーバー実行(Spring Boot)

1件 ∙ (15分)

5. Todo例題のためのAPIサーバー実行ガイド
15:58

セクション 3．Next.js アプリルーティングとTodo

11件 ∙ (1時間 59分)

6. アプリルーティングとリスト処理(1)
13:23
7. アプリルーティングとリスト処理(2)
08:38
8. リストと照会移動
09:09
9. ローディング処理
08:24
10. ページ番号処理
12:49
11. 画面デザイン修正
11:03
12. Server Actionと登録
16:34
13. 登録完了
06:43
14. 修正処理
15:19
15. 削除処理
14:02
16. エラーページとTypeScriptコード
03:49

セクション 4．商品APIサーバー実行(Spring Boot)

1件 ∙ (18分)

セクション 5．Next.js商品処理

12件 ∙ (2時間 28分)

セクション 6．NextAuth認証

10件 ∙ (2時間 4分)

セクション 7．ショッピングカート実装

5件 ∙ (59分)

講座掲載日:

最終更新日:

受講レビュー

全体

8件

5.0

8件の受講レビュー

devhoney
受講レビュー 2
∙
平均評価 5.0
5
98% 受講後に作成
バックエンド側はコードのみ提供フロントエンドでnext.jsフレームワークをどのように使うか、ディレクトリに対する基本的な理解をするのに役立ちました。理論的な部分と自分でもう一度作ってみる時間を持てば、体得するのに役立ちそうです
ju0
受講レビュー 10
∙
平均評価 5.0
5
98% 受講後に作成
nakjasabal0079
受講レビュー 7
∙
平均評価 5.0
5
32% 受講後に作成
初心者が簡単に真似してコーディングできるように講義が構成されています。説明も分かりやすく丁寧にしてくださり、とても良い講義です。 Next.jsを学ぼうとしている全ての方におすすめします。
dachki
受講レビュー 29
∙
平均評価 5.0
5
32% 受講後に作成
講義が難しくなく、分かりやすく丁寧に説明してくれています。
genius17888330
受講レビュー 11
∙
平均評価 5.0
5
36% 受講後に作成

￥8,127

zk202308a5410の他の講座

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

React start with Next.js

zk202308a5410

Reactが初めてなら？ Reactの基本概念をしっかりと固めながらも素早く学べる方法を考える必要があります。 Next.jsとJavaScriptで最小限の知識から始めてみてください。実務での開発に必要な必須的な例題だけを厳選して開発してみましょう。 Todo例題はとても重要なので2回開発する必要があります。一度はコンポーネント中心で、次にはブラウザの経路に合わせて処理されるルーティング中心で！ログインはZustandを利用してください！本当に少ない量のコードでグローバル状態を処理できます。

입문

JavaScript, React, Web Application

React start with Next.js

zk202308a5410

コードで学ぶReact 19 withスプリングブートAPIサーバー

zk202308a5410

Spring Boot (Spring Boot ver3.4.x) で制作されるAPIサーバーと React 19 (with TypeScript) 連携プロジェクトを完成させる！ポートフォリオ作成ブートキャンプ過程全体を講義として制作

중급이상

React, TypeScript, Spring Boot

コードで学ぶReact 19 withスプリングブートAPIサーバー

zk202308a5410

コードで学ぶSpring Webプロジェクト - Basic

zk202308a5410

Spring Legacyプロジェクトを勉強する必要がある場合は？ XML設定一つ一つ自分で作ってみたいなら？

초급

Spring, mybatis, JSP

コードで学ぶSpring Webプロジェクト - Basic

zk202308a5410

コードで学ぶSpring Webプロジェクト - Intermediate

zk202308a5410

Spring Legacyプロジェクトを勉強する必要がある場合は？ XML設定一つ一つ自分で作ってみたいなら？ SpringプロジェクトにSpring Securityを適用する必要がある場合は？

초급

Spring, JSP, mybatis

コードで学ぶSpring Webプロジェクト - Intermediate

zk202308a5410

似ている講座

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

Next.js 15で完成する実戦YouTube クローン開発

antonio

この24時間のチュートリアルでは、自分だけのYouTubeクローンを作る方法を学びます。Next 15とReact 19（tRPCを含む）、サーバーコンポーネントでのプリフェッチ、クライアントコンポーネントでのサスペンス活用、ビデオ処理、バックグラウンドジョブ、AI機能など、高度なトピックを扱います。

초급

Next.js, React, PostgreSQL

Next.js 15で完成する実戦YouTube クローン開発

antonio

作成しながら学ぶフロントエンドDO ITコーディング（Next.js、Typescript）

totuworld

一見素晴らしいサービスではなく、ユーザーに会ってフィードバックを受けることができるサービスを作成できます。 Web開発に自信をもっていただけます。

초급

Next.js

作成しながら学ぶフロントエンドDO ITコーディング（Next.js、Typescript）

totuworld

React start with Next.js

zk202308a5410

입문

JavaScript, React, Web Application

React start with Next.js

zk202308a5410

ディップして食べる Next.js フルコース (韓国語吹き替え)

ludgi

Next.jsフルコースをつまみ食い！ GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験します。

중급이상

React, AWS, GraphQL

ディップして食べる Next.js フルコース (韓国語吹き替え)

ludgi

手につくNext.js - ブログを作る

hajoeun

Next.jsで個人的なブログを作成し、Next.jsを手に入れてください！

초급

Next.js, React, Blog

手につくNext.js - ブログを作る

hajoeun

Inflearn クローンコーディング Part 1: Next.jsとNestJSで始める実戦プロジェクト

lopun

🔥 講座登録から動画アップロードまで、知識共有者機能をそのまま実装してみる実戦フルスタック講座です。Next.js 15とNestJSを活用して講座作成、カリキュラム構成、サムネイルおよび動画アップロード、詳細紹介作成まで実際のInflearnフローに沿って作りながら、Prismaモデリング、JWT認証、S3 + CloudFrontアップロード、Swagger API設計など実務に近い経験を積むことができます。

중급이상

AWS, Docker, Next.js

Inflearn クローンコーディング Part 1: Next.jsとNestJSで始める実戦プロジェクト

lopun

1日で作る自分だけのビジュアルノベルゲーム

Neo

React、Javascript、SpringAI、Springbootを通じて自分だけのビジュアルノベルゲームを作ってみましょう。 SpringAIとReactを通じてウェブベースのビジュアルノベルゲームを作る方法をお教えします！

초급

React, Spring Boot, AI

1日で作る自分だけのビジュアルノベルゲーム

Neo

一口サイズで食べやすい実戦プロジェクト - SNS編

winterlood

いよいよ実戦に挑戦する番です 🔥 React.js + TypeScript + Supabaseで実務レベルのSNSを一緒に開発しながら、認証&認可、無限スクロール、画像アップロード、いいね、無限ネスト型コメント、ダークモードなどの機能を作ってみます。この過程でZustandとTanstack Queryを利用したサーバー及びグローバル状態管理技法も見ていく予定です。

중급이상

supabase, zustand, react-query

一口サイズで食べやすい実戦プロジェクト - SNS編

winterlood

非開発者が4週間で収益化サービスを作る：AIバイブコーディングウェブ + アプリ ALL IN ONE

dingcodingco

コーディング知らなくてもOK！あなたのアイデアをたった4週間で実際の収益に変えてみませんか。 AIと最新ツールを活用して、ウェブサイトとアプリを同時に作り、すぐにサービスまで連結します。

입문

Flutter, Next.js, cursor

非開発者が4週間で収益化サービスを作る：AIバイブコーディングウェブ + アプリ ALL IN ONE

dingcodingco

ゼロベースから学ぶウェブ開発の概念とバイブコーディング

jeyong

迅速な実行と検証の時代、Vibeコーディングで誰よりも速く実行しましょう！広告、決済など収益化まで漏らさずに自分の手で実現してみましょう。

입문

React, Web Application, Next.js

ゼロベースから学ぶウェブ開発の概念とバイブコーディング

jeyong

Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ

ludgi

Whisperをローカルで実行し、FastAPIとNext.jsを活用してAI音声認識アプリを迅速に開発する実践プロジェクトの講義です。リアルタイム音声認識まで実装し、短時間で簡単なポートフォリオとして活用できる成果物を完成させることができます。

초급

Next.js, FastAPI, whisper

Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ

ludgi

JavaScript + jQueryの基礎から実務まで：高度なPart.2

usefulit

理論と実践を通してJavaScriptを習得できる講義です。

중급이상

JavaScript, jQuery

JavaScript + jQueryの基礎から実務まで：高度なPart.2

usefulit

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

중급이상

React, Next.js, cursor

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

초급

React Native, React, ES6

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

The 10x AI-Native Developer: 会社でAIを使って圧倒的な成果を出す方法

dingcodingco

AIはもはや選択ではなく生存の問題です。 3日かかっていた開発を30分に短縮し、反復業務はAIに任せてあなたはより重要な問題解決に集中してください。理論ではなく実務ですぐに使えるAIネイティブ開発法で、会社で「AIが得意な開発者」として認められる確実な方法をお教えします。

초급

Spring Boot, Next.js, AI

The 10x AI-Native Developer: 会社でAIを使って圧倒的な成果を出す方法

dingcodingco

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

초급

React, Electron, GUI

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123