1. 予約内容を選ぶ
リハビリ相談、初回面談、体験予約などを選べる形にしていきます。
Next.js + Supabase + Stripe 練習
予約、会員登録、決済まで試せるサイトを作る。
これは本番サイトではなく練習用です。まずは画面の流れを作り、 その後にSupabaseとStripeを安全に接続していきます。
公開予定URL
next.hirogari-clinic.com- Next.jsで画面を作る
- Supabaseでログインとデータ保存
- Stripeでテスト決済
- Vercelで公開
- next.hirogari-clinic.comに接続
Practice Flow
最初に作る予約の流れ
いきなり本決済には進まず、画面、保存、決済テストの順番で進めます。
2. 会員登録・ログイン
Supabaseを使って、利用者ごとの予約履歴を管理する練習をします。
3. テスト決済
Stripeのテストモードで、カード決済の流れを安全に確認します。
Supabase
会員登録と予約データ
次の段階でSupabaseプロジェクトを作り、ログイン、プロフィール、予約一覧を追加します。
Stripe
テスト決済
Stripeはテストモードから始めます。APIキーは環境変数に入れ、GitHubには載せません。