Course curriculum

    1. 完成品のデモと本講座で学べる事

    2. Discordサーバーはこちら

    1. まずはNext.jsで環境構築をはじめよう

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

    3. ルートグループの作成とフォントの変更

    4. ダッシュボードページのヘッダーから作成しよう

    5. ナビゲーションとメインコンテンツをCSSでスタイリングしよう

    6. ナビゲーションに必要なデータを用意しよう

    7. ダッシュボードにナビゲーションを表示しよう

    8. モバイルにレスポンシブに対応させよう

    1. ダッシュボードツールのディレクトリとページの作成

    2. 動的ルーティングのパラメータを非同期で取得しよう

    3. ページコンテナとページヘッダーの作成

    4. AI画像生成コンポーネントを作成しよう

    5. API Routesの作成とStability AIの紹介

    6. Stable Diffusionの生成AIのAPIを使ってみよう

    7. Next.jsにおけるフォーム処理についての考察

    8. サーバーコンポーネントでServerActionsを実装してみよう

    9. formDataで入力した値の取得とServerActionsの実行

    10. useActionStateを使ってサーバーからの返却値を利用しよう

    11. サーバーアクションの返り値の型指定をしよう

    12. 画像バイナリデータをBase64エンコーディングしよう

    13. AIで生成した画像をブラウザで表示させよう

    14. useActionStatusを使った保留状態の取得

    15. sharpを使って画像データ圧縮をしてみよう

    16. 画像ダウンロードボタンを実装しよう

    1. 背景削除コンポーネントを作成しよう

    2. サーバーアクションで背景削除APIを叩いてみよう

    3. 背景削除APIを実装しよう

    4. APIフェッチの際のファイルサイズ上限エラーの解消

    1. Clerkでユーザー認証機能の実装を始めよう

    2. サインインページの実装とミドルウェアでリダイレクト制御

    3. ログイン/新規登録ボタンを追加しよう

    4. 認証ボタンをレスポンシブ対応させよう

    5. 認証時のWebhook設定をはじめよう

    6. Webhookが正常に発火するのかテストしよう

    1. TiDBのセットアップを始めよう

    2. PrismaでTiDBに接続しよう

    3. Prismaインスタンスを作成しよう

    4. ユーザーやサブスクリプションのモデルを定義しよう

    5. マイグレーションしてTiDBにテーブルを追加しよう

    6. ユーザー作成時にユーザーデータを追加しよう

    7. ユーザー認証時にデータが挿入されるか確認しよう

    8. ユーザー更新・削除時でもWebhookが発火するようにしよう

    9. クレジット残数コンポーネントを作成しよう

    10. クレジット取得用関数をデータフェッチ層で作成しよう

    11. API利用毎にクレジットを減らしてみよう

    12. クレジット上限が来た場合は課金ページへリダイレクト

    13. 未認証ユーザーがAI機能を利用しようとした場合の処理

    14. ストリーミングとクレジット表記の切り替え

About this course

  • 98,000円
  • 97回のレッスン
  • 9時間の動画コンテンツ

Discover your potential, starting today