Course curriculum

    1. 本講座で学べること

    1. Next.js14で開発環境構築をしよう

    2. Supabaseの初期セットアップをはじめよう

    3. SNSポスト用のテーブルを作成しよう

    4. RLSポリシー設定とcreateClientの動作確認

      無料プレビュー

    5. サーバーコンポーネントでSupabaseを取り扱う方法

    6. GithubでOAuth認証設定をはじめよう

    7. サインインボタンを追加してユーザー認証してみよう

    8. 認証コードを元にSupabaseでセッション管理するAPIを実装しよう

    9. RLSポリシーを変更して認証済みユーザーだけがデータ閲覧できるように修正しよう

    10. ログアウトボタンを追加しよう

    11. セッション情報によってUIを動的に切り替えてみよう

    12. CSRではなくSSRでのセッション取得に変更しよう

    13. 未ログインユーザーはログインページへリダイレクトさせよう

    14. Supabaseテーブルで定義している型をCLIで自動生成してみよう

      無料プレビュー

    15. プロジェクト全体で型を使用したい時のグローバルな型宣言

    16. 認証ユーザーとPostテーブルに外部キーで関連付けしよう

    17. user_idカラムを追加したのでDatabaseの型を更新しよう

    18. プロフィールテーブルを作成しよう

    19. Trigger FunctionをSupabaseで作ってみよう

    20. 関数が自動で発火するトリガーを作ろう

    21. SNSポスト用コンポーネントを作成しよう

    22. Server Actionsで直接DB操作を行ってみよう

    23. ポスト内容をJSONではなくHTMLで出力しよう

    24. いいね機能実装のためにいいねテーブルを作ろう

    25. いいねコンポーネントを作成しよう

    26. いいね機能を実装しよう

    27. 無限にいいねが押せる状態をユーザー状態の条件分岐で修正しよう

    28. Typescriptの型のエラーを修正しよう

    29. Postコンポーネントを作成しよう

    30. useOptimisticの楽観的UI更新とはどういう意味か

    31. 実際に楽観的UI更新する関数を作ってみよう

    32. ディスパッチ関数を呼び出して楽観的UI更新してみよう

    33. useTransitionでUI更新のバグを修正しよう

    34. 違うブラウザ間でもリアルタイムに投稿を反映させよう

    35. channelでポスト投稿をリッスンしよう

    36. SNS風にレイアウトをTailwindCSSで修正しよう：その①

    37. SNS風にレイアウトをTailwindCSSで修正しよう：その②

    38. SNS風にレイアウトをTailwindCSSで修正しよう：その③

    39. いいねアイコンと押下時に赤色に変更させよう

    40. Githubアイコンを追加してレイアウトを調整しよう

    41. SNSをビルドしてVercelへデプロイしてみよう

    42. DYNAMIC_SERVER_USAGEエラーを解決しよう

    43. Vercelのドメイン名でGithubとSupabase設定を更新しよう

About this course

  • 21,800円
  • 44回のレッスン
  • 3時間の動画コンテンツ

Discover your potential, starting today