本コースでは、SupabaseのSubscriptionとNextjsと連携したReal-time Appの開発について4ステップで学習します。また、作成したWebアプリケーションに対してCypressを使用したE2Eテストを行います。

Step1. SupabaseとNextjsによる認証機能

Step2. Supabase StorageとNextjsによるユーザーAvatar画像のUploadとDownload

Step3. Supabase Table Level Subscription (お知らせ機能)

Step4. Supabase Row Level Subscription (画像投稿+コメント機能)

学習のポイント

• NextjsとSupabaseを連携したリアルタイムApp開発

• Supabase Storage

• Supabase Table/Row Level Subscription

• SubscriptionとReact-queryのCache連携

• CypressによるE2Eテスト

  
  

本コースで使用するTech stack

Nextjs

Supabase

Cypress: E2E Test

React-query: サーバーデータ管理(cache)

Zustand: クライアント状態管理

Typescript

Tailwind CSS