NextjsとSupabaseによる高性能Web開発
React18を搭載した最新Nextjsのversion完全対応。Nextjsの最新機能 On-demand ISRをSupabaseと連携して開発する手法を学びます。
What you will learn
Supabase (Tables, 認証, Relation, RLS, Function hooks, CASCADE Delete)
Nextjs (On-demand ISR, Serverless function(λ), Middleware, Edge API routes(ε) )
Web vitals (TTFB, FCP, LCP)
SSG, ISR, SSG+CSF, SSR
State management by React-query + Zustand
Vercel Edge Network
Why take this course?
本コースでは、NextjsとSupabaseを連携したWebアプリケーションの開発について2つのプロジェクトを通して学習します。プロジェクト1では、SSG(SG) + CSFによるDynamicデータ更新を重視したTodo appの実装に加えてWeb vitals(TTFB, FCP, LCP)について学習しWeb vitalsとSSG, SSR, SSG + CSFとの関係性の理解及びそれらの比較計測を行います。プロジェクト2では、On-demand ISRを活用した高速配信+準Dynamicデータ更新を実現するNote appを実装します。
Project 1 : Todo App (SSG+CSF(Client side fetch)によるDynamicデータ更新)
Project 2 : Note App (on-demand ISRを活用した高速配信+準Dynamicデータ更新)
本コースで使用するTech stack
Nextjs
Supabase
React-query : サーバーデータ管理(cache)
Zustand : クライアント状態管理
Typescript
Tailwind CSS
本コースの学習テーマ
Supabaseの使い方 (Table作成, RLS, リレーション, CASCADE Deleteなど)
NextjsとSupabaseの連携 (認証, CRUD)
React-queryとZustandによる状態管理
Web vitals (TTFB, FCP, LCP)の理解
SSG(SG), SSR, SSG+CSFとWeb vitalsの関係性と測定
Nextjsの全Page種類を理解
ISRの問題点理解とOn-demand ISR実装 (api/route, Supabase Function Hooks)
next/link prefetch挙動の理解 (遷移先パターン別)
静的配信初回アクセス遅延挙動の理解 Edge CDN (X-Vercel-Cache)
ISR更新時のEdge Networkの理解
Vercel serverless function regionの違いによるSSRレスポンスへの影響(TTFB, LCP)
Vercel Edge Network
Middlewareの簡単なdemo (A/B test) : Nextjs 12.2〜
Edge API routes (ε) と API routes (λ) の応答速度の違い : Nextjs 12.2〜
Screenshots
Reviews
Charts
Price
Rating
Enrollment distribution
