Next.jsとAI技術を使用したアプリ構築の講座紹介(ChatGPT、DALLE、Whisper、Embedding、LangChain)
YouTube でゼロから開発するプログラミング動画チュートリアル「フルスタックチャンネル」を発信中の「はる」と申します。
最近は、Next.js と Supabase、OpenAI の ChatGPT、DALLE、Whisper、Embedding を使用したアプリの講座を作成しています。
講座が揃ってきましたので、ご紹介していきます。
基礎
Next.js と Supabase を使用してブログを構築する講座です。
Next.js13 新機能の App Directory と Supabase でブログ構築
サインアップ、ログイン、ログアウトの認証機能とブログを取得、追加、編集、削除のアプリの基本を学習することができます。
講座
解説記事
完成イメージ
Next.js13 と Supabase で構築したブログにコメント機能追加
ブログにコメント機能を追加していきます。
ブログにコメントとコメントに「いいね」をすることができるようになります。
講座
解説記事
完成イメージ
Next.js13 と Supabase のブログ完全版
ブログに、ページネーション、コメント編集、削除機能を追加した、ブラッシュアップしています。
講座
解説記事
完成イメージ
全てがここに！Next.js と Supabase で構築する認証システム
Next.js と Supabase で認証システムを構築していきます。
ログイン、サインアップ、ログアウト、パスワードリセット、メールアドレスの変更、パスワードの変更、そしてプロフィール編集といった認証機能を実装します。
入力フォームのバリデーションを簡単に実装できる Rect Hook Form ライブラリを使用しています。
講座
解説記事
完成イメージ
Next.js と Supabase、Stripe で構築するサブスクメンバーシップ機能
Next.js と Supabase、Stripe でサブスクリプションのメンバーシップ機能を搭載したブログアプリを構築していきます。
ユーザーがメンバーシップを作成し、メンバーシップに応じたブログを公開することができます。
メンバーシップを購入すると、メンバーシップ用のブログを見れるようになります。
Stripe を使用したサブスクリプションのメンバーシップ機能の構築に興味がある方は、ぜひ参考にしてください。
講座
解説記事
完成イメージ
画像生成
Next.js13 と Supabase で AI 画像生成アプリ構築
Next.js と Supabase、DALL・E を使用して、AI 画像生成アプリを構築する講座です。
DALL・E の使い方が気になっている方は、ぜひ参考にしてください。
講座
解説記事
完成イメージ
最強 AI 画像生成アプリ！Next.js と Stable Diffusion で画像生成アプリを作ろう
Next.js と FastAPI で「Stable Diffusion」を使用した画像生成アプリを構築する講座です。
Stable Diffusion が気になっている方は、ぜひ参考にしてください。
講座
解説記事
完成イメージ
3D で絵画を楽しむ！Next.js と Three.js で作る AI アートギャラリー
Next.js と Three.js、DALL・E で AI アートギャラリーを構築する講座です。
Three.js が気になっている方は、ぜひ参考にしてください。
講座
解説記事
完成イメージ
ChatGPT
Next.js13 と Supabase で AI チャットアプリ(GPT-3)構築
Next.js と Supabase、GPT-3 を使用して、AI チャットアプリを構築する講座です。
講座では GPT-3 を使用していますが、ChatGPT、GPT-4 に簡単に変更できます。
ChatGPT の使い方が気になっている方は、ぜひ参考にしてください。
講座
解説記事
完成イメージ
目標設定！Next.js と LangChain で自動タスク生成アプリを作ろう
Next.js と LangChain で自動タスク生成アプリを構築する講座です。
ユーザーが目的を入力すると、全自動で目的を達成するためのタスクリストを作成して、順番に回答をしていきます。
LangChain が気になっている方はぜひ参考にしてください。
講座
解説記事
完成イメージ
ChatGPT と VOICEVOX を組み合わせて音声チャットアプリを構築！あなたの選んだキャラが読み上げます！
Next.js と ChatGPT、VOICEVOX を使用した音声チャットアプリを構築する講座です。
ChatGPT に質問した回答を、選択したキャラクターが読み上げます。
VOICEVOX を使用したアプリを作成したい方はぜひ参考にしてください。
講座
解説記事
完成イメージ
ChatGPT の新機能「Function Calling」Next.js と shadcn/ui で作るチャットアプリ
Next.js でチャットアプリを構築しながら、ChatGPT の新機能「Function Calling」について学んでいきます。
Function Calling は、ユーザーからの質問に対する回答をより具体的に制御するための機能です。
今回のチュートリアルでは、世界各地のリアルタイムの「時刻」と「天気」を取得する関数を作成し、それを ChatGPT の回答に組み込む方法を紹介します。
UI は shadcn を使用しています。
Function Calling に興味がある方は、ぜひこのチュートリアルを参考にしてみてください。
講座
解説記事
完成イメージ
目指せクイズ王！Next.js と Prisma で構築する AI クイズアプリ(ChatGPT、FunctionCalling)
Next.js と Prisma で AI クイズアプリを構築する講座です。
NextAuth で Google 認証を実装し、ChatGPT を使用してクイズを自動生成します。
クイズのテーマや難易度、言語、問題数も選べるようにしました。
FunctionCalling で確実にクイズを生成する方法も解説します。
講座
解説記事
完成イメージ
サブスク入門！Next.js と Prisma、Stripe でサブスク機能を作ろう
Next.js と Prisma、Stripe を使用して、サブスク機能を追加する講座です。
クイズアプリは、ChatGPT を使用しているので、完全に無料で公開することは難しくなります。
そこで、クイズ生成回数に制限を設け、サブスクを購入すると制限なく使えるようにします。
決済ページは、Stripe が構築済みのページとカスタマイズ可能なページの 2 つを紹介します。
Stripe を使用したサブスクの構築に興味がある方は、ぜひ参考にしてください。
講座
解説記事
完成イメージ
音声認識
Next.js13 と Supabase で音声認識 AI チャットアプリ(ChatGPT、Whisper)構築
Next.js と Supabase、Whisper を使用して、音声認識 AI チャットアプリを構築する講座です。
Whisper の使い方が気になっている方は、ぜひ参考にしてください。
講座
解説記事
完成イメージ
Next.js13 と Supabase、ChatGPT、Whisper で自動要約アプリ構築
Next.js13 と Supabase、ChatGPT、Whisper で自動要約アプリを構築する講座です。
音声変換に FFmpeg を使用しています。
講座
解説記事
完成イメージ
文章検索
Next.js13 と Supabase で知識データベース Q&A アプリ構築(Embedding)
Next.js と Supabase、Embedding を使用して、知識データベース Q&A アプリを構築する講座です。
Embedding の使い方が気になっている方は、ぜひ参考にしてください。
講座
解説記事
完成イメージ
Prisma
Next.js と Prisma で構築する認証システム(メールアドレス、Google 認証)
Next.js と Prisma で認証システムを構築する講座です。
NextAuth でメールアドレス認証と Google 認証を実装し、プロフィール編集まで構築します。
Prisma を使用した認証機能の構築に興味がある方は、ぜひ参考にしてください。
講座
解説記事
完成イメージ
Next.js と Prisma でブログ構築(投稿一覧、詳細、新規、編集、削除)
Next.js と Prisma でブログを構築する講座です。
ブログを構築しながら、投稿一覧、詳細、新規、編集、削除機能を実装していきます。
基本的な機能を学ぶことで、他のアプリケーションの構築にも応用できます。
Prisma を使用したブログの構築に興味がある方は、ぜひ参考にしてください。
講座
解説記事
完成イメージ
ソースコード
LINE 登録すると講座のソースコードがダウンロードできます。
新着の講座がいち早く届きますので、ぜひ登録をお願いします。
LINE お友達登録
フルスタックチャンネル
講座の不明点や個人開発の疑問点など何でもご質問ください。
どんどん Next.js、Supabase、AI の講座を作成していきますので、楽しみにしていてください。
よろしくお願いします。
Discussion