강의

멘토링

커뮤니티

Programming

/

Web Development

Next.jsとSpring Boot

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

難易度 中級以上

受講期間 無制限

  • zk202308a5410
Nextjs
Nextjs
fullstack
fullstack
react.js
react.js
javascript
javascript
SpringBoot
SpringBoot
JavaScript
JavaScript
React
React
Spring Boot
Spring Boot
JPA
JPA
Next.js
Next.js
Nextjs
Nextjs
fullstack
fullstack
react.js
react.js
javascript
javascript
SpringBoot
SpringBoot
JavaScript
JavaScript
React
React
Spring Boot
Spring Boot
JPA
JPA
Next.js
Next.js

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

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

4.9

5.0

양정헌

98% 受講後に作成

バックエンド側はコードのみ提供 フロントエンドでnext.jsフレームワークをどのように使うか、ディレクトリに対する基本的な理解をするのに役立ちました。理論的な部分と自分でもう一度作ってみる時間を持てば、体得するのに役立ちそうです

5.0

성낙현(낙자쌤)

32% 受講後に作成

初心者が簡単に真似してコーディングできるように講義が構成されています。説明も分かりやすく丁寧にしてくださり、とても良い講義です。 Next.jsを学ぼうとしている全ての方におすすめします。

5.0

뒤안길

32% 受講後に作成

講義が難しくなく、分かりやすく丁寧に説明してくれています。

受講後に得られること

  • Next.js 16を活用した実務レベルのフルスタック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を適切に活用するためには、それに合った適切な開発方法が必要です。


この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 16

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


Slow then Fast

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

  • 理論的な悩みは - 'SLOW'

  • JavaScriptで最速で作る - 'FAST'

  • デザインは最小限に素早くAIで処理 - 'FAST'

  • APIサーバーは提供されるソースコードで - 'FAST'


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


Todoの例:App Routingを使って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,209

受講生

161

受講レビュー

287

回答

4.8

講座評価

5

講座

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

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

 

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

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

ㄴ네이버 카페

 

주요 저서 

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

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

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

カリキュラム

全体

48件 ∙ (8時間 58分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

12件

4.9

12件の受講レビュー

  • anansi75431688님의 프로필 이미지
    anansi75431688

    受講レビュー 1

    平均評価 5.0

    5

    32% 受講後に作成

    • slasnrndu4468님의 프로필 이미지
      slasnrndu4468

      受講レビュー 4

      平均評価 5.0

      5

      32% 受講後に作成

      • genius17888330님의 프로필 이미지
        genius17888330

        受講レビュー 12

        平均評価 5.0

        5

        36% 受講後に作成

        • devhoney님의 프로필 이미지
          devhoney

          受講レビュー 2

          平均評価 5.0

          5

          98% 受講後に作成

          バックエンド側はコードのみ提供 フロントエンドでnext.jsフレームワークをどのように使うか、ディレクトリに対する基本的な理解をするのに役立ちました。理論的な部分と自分でもう一度作ってみる時間を持てば、体得するのに役立ちそうです

          • ju0님의 프로필 이미지
            ju0

            受講レビュー 12

            平均評価 4.9

            5

            98% 受講後に作成

            ¥8,153

            zk202308a5410の他の講座

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

            似ている講座

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