[応用編] NextjsとSupabaseによるリアルタイムWeb開発

Description

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

What You Will Learn!

• Supabase Storage
• Supabase Table + Row Level Subscription
• Automatic cache (react-query) update with subscription
• CypressによるE2Eテスト
• ZustandとReact-queryによる状態管理
• Usage of Suspense (React 18)

Who Should Attend!

• フロント・フルスタックエンジニア

TAKE THIS COURSE