AI SaaSを実装しながら学ぶNext.js×Stripe決済実践講座
AI SaaS(AI機能を使ったWebサービス)をNext.jsとStripeで実装する講座です。AIでサクッとたたき台が作れる時代にプラスして必要な技術の1つに「決済機能」があります。WebアプリケーションにStripe決済を組み込んで、マネタイズする手法を学べる講座です。
完成品のデモと本講座で学べる事
Discordサーバーはこちら
まずはNext.jsで環境構築をはじめよう
shadcn/uiの初期セットアップをはじめよう
ルートグループの作成とフォントの変更
ダッシュボードページのヘッダーから作成しよう
ナビゲーションとメインコンテンツをCSSでスタイリングしよう
ナビゲーションに必要なデータを用意しよう
ダッシュボードにナビゲーションを表示しよう
モバイルにレスポンシブに対応させよう
ダッシュボードツールのディレクトリとページの作成
動的ルーティングのパラメータを非同期で取得しよう
ページコンテナとページヘッダーの作成
AI画像生成コンポーネントを作成しよう
API Routesの作成とStability AIの紹介
Stable Diffusionの生成AIのAPIを使ってみよう
Next.jsにおけるフォーム処理についての考察
サーバーコンポーネントでServerActionsを実装してみよう
formDataで入力した値の取得とServerActionsの実行
useActionStateを使ってサーバーからの返却値を利用しよう
サーバーアクションの返り値の型指定をしよう
画像バイナリデータをBase64エンコーディングしよう
AIで生成した画像をブラウザで表示させよう
useActionStatusを使った保留状態の取得
sharpを使って画像データ圧縮をしてみよう
画像ダウンロードボタンを実装しよう
背景削除コンポーネントを作成しよう
サーバーアクションで背景削除APIを叩いてみよう
背景削除APIを実装しよう
APIフェッチの際のファイルサイズ上限エラーの解消
Clerkでユーザー認証機能の実装を始めよう
サインインページの実装とミドルウェアでリダイレクト制御
ログイン/新規登録ボタンを追加しよう
認証ボタンをレスポンシブ対応させよう
認証時のWebhook設定をはじめよう
Webhookが正常に発火するのかテストしよう
TiDBのセットアップを始めよう
PrismaでTiDBに接続しよう
Prismaインスタンスを作成しよう
ユーザーやサブスクリプションのモデルを定義しよう
マイグレーションしてTiDBにテーブルを追加しよう
ユーザー作成時にユーザーデータを追加しよう
ユーザー認証時にデータが挿入されるか確認しよう
ユーザー更新・削除時でもWebhookが発火するようにしよう
クレジット残数コンポーネントを作成しよう
クレジット取得用関数をデータフェッチ層で作成しよう
API利用毎にクレジットを減らしてみよう
クレジット上限が来た場合は課金ページへリダイレクト
未認証ユーザーがAI機能を利用しようとした場合の処理
ストリーミングとクレジット表記の切り替え