Course curriculum

    1. 本講座で学べる事

    2. 完成品のデモ

    1. Next.js14の環境構築とSupabaseの初期セットアップを始めよう

    2. Supabaseでレッスン用テーブルを作成しよう

    3. createClientComponentClient()とcookiesを利用してsupabaseのセットアップしよう

    4. レッスンテーブルからデータを取得して表示してみよう

    5. shadcn/uiを使ってカードを作ってみよう

    6. 関数宣言の追加とSSGとSSRについて

    7. ビルドでSSG/SSRの確認とpreview環境で動作確認してみよう

    8. 講座レッスン詳細ページを作成しよう

    9. Supabase CLIでDataBase型を作成してTypescript宣言をしよう

    10. 詳細レッスンデータをブラウザへ出力しよう

    11. 詳細ページにおけるcookies使用のエラーを解決しよう

    1. Supabase AuthenticationのOAuth認証(Github)を実装しよう

    2. ヘッダーコンポーネントを作成しよう

    3. Github認証でサインイン機能を実装してみよう

    4. Server ComponentとClient Componentの境界を作ろう

    5. サインイン実装とセッション状態をブラウザで確認しよう

    6. サインアウト実装とUIボタンの切り替えをしよう

    7. 認証用コードを利用してセッションを確立しよう

    1. プロフィールページの作成と認証ユーザーidとの外部キー接続

    2. プロフィールテーブルへ自動でユーザー情報を格納する関数を作成しよう

    3. Supabase Trigger Functionを作成しよう

    4. OAuth認証時に自動でプロフィールデータが作成されるか確認しよう

    1. Stripeアカウントの作成とシークレットキー設定をしよう

    2. Stripe顧客ユーザー作成APIの構築をはじめよう

    3. Postman/ThunderClientを利用してAPIテストをしよう

    4. プロフィールテーブルにもStripe顧客IDを保存しよう

    5. プロフィールデータが更新されないエラーをRLSポリシー設定で解消しよう

    6. パブリック状態のAPIに制限を付与しよう

    7. Supabase WebHooksを使ってAPIコールタイミングを設定しよう

    8. ngrokを使って一時的にローカルサーバーを外部Webサーバーに配置しよう

    9. Stripeにメールアドレスが登録されないエラーを解決しよう

    1. サブスク会員だけが閲覧できるテーブルを作成しよう

    2. サブスク限定動画をデータフェッチングしてみよう

    3. Next.jsでYoutube動画を表示する方法

    4. 非同期処理の並列データフェッチング

    5. サブスク商品(月払い/年払い)を作成しよう

    6. サブスク商品価格ページを作成しよう

    7. 商品プランデータをStripeからデータフェッチしよう

    8. 商品プランデータを整形して取得してブラウザに表示しよう

    9. プラン情報にTypescriptの型定義をしよう

    10. セッション状態に応じてサブスク契約ボタンUIを切り替えよう

    11. プロフィールデータを取得する関数を作成しよう

    12. サブスクリプション契約コンポーネントを作成しよう

    13. サブスク決済APIの作成をはじめよう

    14. カードチェックアウト決済の実装をしよう

    15. 決済ページへリダイレクトさせよう

    16. 決済成功ページとキャンセルページを作成しよう

About this course

  • 29,800円
  • 64回のレッスン
  • 5時間の動画コンテンツ

Discover your potential, starting today