【Next.js】【DifyAPI】認証・継続課金機能付きの生成AIアプリをハンズオンで開発してみよう【資料たっぷり】

Dify APIの解説やblocking, streamingモードの解説をした後に、ワークフローの作成を行います。

ワークフローを作成し公開、APIキーの発行後に.envファイルに保存する方法を解説しています。

curlを使いワークフローAPIへアクセスし接続確認する方法を解説しています。

UIコンポーネント集のshadcn/uiをインストールしておきます。

ワークフロー(blockingモード)のイメージ図の解説と、必要なフォルダファイルを作成しています。

shadcn/uiコンポーネントやtailwindcssでデザイン調整を行います。

コンポーネント -> ルートハンドラー -> Dify API -> ルートハンドラー -> コンポーネント という処理の流れを資料をもとに解説しています。

Dify APIにアクセスするためにコンポーネントとルートハンドラーのコードを書いていきます。

引き続きルートハンドラーのコードを書き、dify apiからの応答を確認しつつ、ブラウザ表示されるところまで確認しています。

Dify API streaminモードについての仕組みやチャンク、チャンク内のイベントを解説した後に実際にcurlを使ってデータを取得する方法を解説しています。

straeming modeを実現するために使用されているSSEや、SSE対応するためのEventResourceAPIについて解説しています。

Streamingを実装するために必要なファイルを作成しています。

Streaming (SSE)に対応するためにルートハンドラーを変更しています。

カスタムフックの解説と、カスタムフックに含めたい変数や関数について解説しています。

ルートハンドラーにアクセスし、eventSource APIを使ってSSEを取得するための関数について解説しています。

SSEで送信されるチャンクの型の指定方法について解説しています。

チャンクの内容によって抽出するテキストの場所が変わるので、対応するためのhandleEventData()関数と、文字を追加するappendText()関数について解説しています。

ストリームデータのクリーンアップとしてuseEffect()を使いつつ動作確認しています。

このセクションのまとめになります。

Chatflowの解説をした後に、Dify側でチャットフローアプリを作成し、APIキーを発行し、環境変数に設定するところまで解説をしています。

データベースを扱うためにPrismaをインストールし、DB作成やクライアントインスタンス用のコードなどを準備しています。

UserとConversationモデルを作成し、Userのダミーデータを作成する方法を解説しています。

コマンド設定しマイグレーション・ダミーデータ実行しデータベースの内容をPrisma Studioで確認しています。

認証機能の解説動画をNext.js第1弾と同じものを扱っています。動画視聴時の注意点や関連GitHubなどについて解説しています。

shadcn/uiも使いつつヘッダー画面を作成する方法を解説しています。

layouts.tsxを作成したり、不要なpage.tsxを削除しつつ、ヘッダーの表示確認をしています。

Auth.jsの解説とインストール方法を解説しています。

認証の設定ファイルとミドルウェアのファイルを解説しつつ作成しています。

Auth.js設定ファイルを作成しメールアドレス・パスワードでログインができるように実装していきます。

サーバーアクションを使ってログイン機能を作成し、認証用のレイアウトを作成する方法を解説しています。

ログインフォームをハンズオンで解説しています。

引き続きログインフォームをハンズオンで解説しています。

ログイン後の共通ヘッダーとしてPrivateHeaderを作る方法を解説しています。

shadcn/uiのDropdownコンポーネントも使いつつログアウト機能を実装しています。

ログイン後のurlが/loginのままで、うまくログアウトができない不具合がありましたのでその対策方法を解説しています。

ユーザー登録ページを作っていきます。zodバリデーションスキーマと、型指定としてRecordユーティリティ型の解説・実装をしています。

引き続きserverActionの機能を作っていきます。フォームからの情報取得、バリデーション、DB登録など。

ユーザー登録フォームを作成し、ユーザー登録時のエラーや登録後にダッシュボードに遷移するようにしています。

npm run build時にESLintのエラーが出ていましたので対応方法を解説しています。

このセクションのまとめになります。

Dify チャットフローAPIを使った実装内容の紹介と、ログイン状態を保持するためのauth.config.tsへの追記内容を解説しています。

必要なファイルフォルダを作成しつつ、layout.tsxからCSSでデザイン調整していきます。

引き続きデザイン調整を行なっています。

Auth.jsで使用されるtokenの中にuserIDが含まれているので、sessionの中に追加して取得しやすいように対応する方法を解説しています。

RSCで取得したユーザーIDをPropsを使ってRCCに渡す方法を解説しています。

DifyチャットフローAPIの送信と応答の内容を確認します。(チャットメッセージを送信)

DifyチャットフローAPIの送信と応答の内容を確認します。(会話履歴メッセージ、会話を取得)

状態管理ライブラリのZustandについて概要などを解説しています。

stateとアクションの内容を解説しつつ実際にコードを書いていきます。

型指定しつつStoreに必要なステートと関数を追加していきます。

localStorageに保存するための設定を追記していきます。

ワークフローの時に作っていたコードを参考に、ChatInputとルートハンドラーを実装しています。

チャット開始し、DifyAPIにアクセスし、会話IDをDBに保存したりZustandでstate更新するなどの一連の流れと注意点を解説しています。

会話IDを取得しDB操作関数に渡すコードを追記しています。

会話情報の新規登録と更新についてPrismaを使ってコードを作成しています。

ChatInputコンポーネントにuseChatStoreなど必要な情報を追記していきます。

引き続きChatInputコンポーネントにコードを追記し、[conversation_id]/page.tsx にリダイレクトできるようにしています。

useEffect, useRefを使ってメッセージ追加時に自動スクロールできるようにしています。

ユーザーメッセージとDifyAPIからの応答メッセージによってcssを分けつつ、ローディングなども対応しています。

新規チャットページを開いた際にstoreの情報が残っているのでクリアする方法を解説しています。(サーバー側)

新規チャットページを開いた際にstoreの情報が残っているのでクリアする方法を解説しています。(クライアント側)

DifyAPIから会話リストを取得するためにルートハンドラーを作成しています。

ChatSidebarでDifyAPIにアクセスし会話リストを取得するコードを解説しています。

ChatSidebarコンポーネントに新規チャットのボタンを追加しています。

ChatSidebarコンポーネントに会話リストを表示させ、クリックしたら会話ID付与したURLにリンクするように対応します。

RSC側でDifyAPIと接続し会話履歴を取得する方法を解説しつつ、ローディング対応しています。

RSCからDifyAPIにアクセスし情報取得します。

型設定もしつつpropsを使ってRCC側に情報を渡す方法を解説しています。

RSCからpropsで渡ってくる情報を描画する方法を解説しています。

このセクションのまとめになります。

生成AIサービスを作り、月額課金で運営する場合に考えておきたいことについてまとめています。(金額、サービス利用料、インフラ料、手数料、粗利など)

使用状況の把握とプラン管理のためにPrismaスキーマにモデルを追加しています。

ダミーデータを追加するためにseedsフォルダを作り、ダミーファイルを管理する方法を解説しています。

ユーザーごとのプラン設定を追加し、動作確認しています。

使用状況を取得・登録するために、Prismaを使ってDBにアクセスする関数を解説・実装しています。

ユーザーごとの使用状況を表示するためのコンポーネントを作っていきます。

引き続きCardコンポーネントを使いつつデザイン調整をしています。

UserUsageコンポーネントを作成し、dashboardで読み込み、表示確認をしています。

ルートハンドラーに使用制限や使用量の追加処理などを実装しています。

ChatInputから送信し、制限に達していた場合にToasterを表示する方法を解説・実装しています。

Stripeにログインしてアカウント作成し、公開キー・秘密キー・商品作成し価格IDを取得し設定する方法を解説しています。

Stripeライブラリをインストールしクライアント生成しつつ、

Stripe顧客IDを取得または作成する関数を実装していきます。

Stripeチェックアウト(決済)用のセッションを作る関数の解説と実装をしています。

Stripeチェックアウトセッションを使い決済画面を表示するためのAPIルートハンドラーを解説・実装しています。

プランを表示するためのSubscriptionページを作成していきます。

Subscriptionページの続きを作りつつボタンを押した後の処理を作成し、Stripe決済画面を表示できるようにしています。

未ログイン時にsubscriptionにアクセスするとエラーになるため、auth.config.tsを一部変更しています。

プラン購入後にDB保存するためにwebhookを使うと便利なので、Stripe CLIをインストールしwebhookを使えるようにする方法を解説しています。

サブスクリプション情報をデータベースに保存するための関数を解説・実装しています。

Stripewebhookイベントを解説し、ルートハンドラーを実装していきます。

データベースに保存する情報を解説・実装しています。

DB保存のコードを実装し、動作確認しています。

プランページへのリンクを追加しつつ、useSearchParams()でのエラー対応のため、Suspenseでラップする方法を解説しています。

現在サブスクリプション中なのかを確認するためのAPIを作成しています。

Proプラン契約時の表示を変更する方法を解説・実装しています。

カスタマーポータルのリンク取得用のAPIを作成しています。

ボタンを押してPortalが表示できるように実装しています。

サブスクリプションの更新やキャンセル対応をするためにまずはファイルの整理方法を解説・実装しています。

プランをキャンセルしたりキャンセルのキャンセルなどを対応するための関数を解説・実装しています。

引き続きプラン更新の関数を解説・実装しています。

プランキャンセル後、プラン期間が過ぎた後にプランを削除する(FREEプランに戻す)関数と、プラン更新の動作確認を解説・実装しています。

時間を経過させてプラン継続やキャンセル後の処理の動作確認する方法を解説しています。

このセクションのまとめになります。

Dockerの概要や簡易年表について解説しています。

Dockerができる事を5つに絞りできるだけわかりやすく解説しています。

mac PCでDockerの管理ソフトであるDocker Desktop のインストール方法とターミナルの操作方法を解説しています。

WindowsにDockerDesktopをインストールする方法を解説しています。

イメージをカスタマイズするためのDockerfileの設定内容について解説しています。

コンテナを複数管理・構築するためのdocker-compose.ymlについて解説しています。

ボーナスレクチャーはudemy講座内で唯一 宣伝を行っていい場所になっております。