NextjsとSupabaseによる高性能Web開発

本コースでは、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〜