강의

멘토링

커뮤니티

Programming

/

Web Development

Next.js 15 with Spring Boot

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

  • zk202308a5410
Nextjs
fullstack
react.js
javascript
SpringBoot
JavaScript
React
Spring Boot
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,145

受講生

156

受講レビュー

274

回答

4.8

講座評価

5

講座

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

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

 

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

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

ㄴ네이버 카페

 

주요 저서 

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

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

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

カリキュラム

全体

44件 ∙ (8時間 50分)

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

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

受講レビュー

全体

11件

5.0

11件の受講レビュー

  • 안현진님의 프로필 이미지
    안현진

    受講レビュー 1

    平均評価 5.0

    5

    32% 受講後に作成

    • gogo님의 프로필 이미지
      gogo

      受講レビュー 4

      平均評価 5.0

      5

      32% 受講後に作成

      • 박병천님의 프로필 이미지
        박병천

        受講レビュー 11

        平均評価 5.0

        5

        36% 受講後に作成

        • 양정헌님의 프로필 이미지
          양정헌

          受講レビュー 2

          平均評価 5.0

          5

          98% 受講後に作成

          백엔드 쪽은 코드만 제공 프론트엔드로 next.js 프레임워크를 어떻게 쓰는지 디렉터리에 대한 기본적인 이해를 하는데 도움이 되었습니다. 이론적인 부분과 스스로 한번 더 만들어보는 시간 가지면 체화시키는데 도움이 될 것 같아요

          • SunJ님의 프로필 이미지
            SunJ

            受講レビュー 12

            平均評価 4.9

            5

            98% 受講後に作成

            ¥8,295

            zk202308a5410の他の講座

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

            似ている講座

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