강의

멘토링

로드맵

Inflearn brand logo image
NEW
Programming

/

Full-stack

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

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

56名 が受講中です。

  • 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はサーバーサイドとブラウザの両方で動作できるため、新しいアプローチが必要です。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を利用したサーバーデータを複数のコンポーネントが共有する方法




10月末まで開設記念60%割引クーポン(4万円割引)を発行いたします。




https://inf.run/ryzNE

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Next.jsの例を実務に適用したい人

  • APIサーバーと連携する開発が必要なフロントエンド開発者

  • Reactで次のステップに進みたい開発者

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

  • React基礎知識

  • REST方式に対する理解

こんにちは
です。

1,822

受講生

115

受講レビュー

257

回答

4.8

講座評価

4

講座

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

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

2015년 부터 '코드로 배우는 ..' 시리즈를 집필하고 있습니다.

ㄴ네이버 카페

 

カリキュラム

全体

44件 ∙ (8時間 50分)

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

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

受講レビュー

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

期間限定セール

¥33,000

50%

¥7,837

zk202308a5410の他の講座

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

似ている講座

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