Next.js 13 と Supabase で AI チャットアプリを構築していきます。
AI チャットは OpenAI の GPT-3 を使用します。
GPT とは、「Generative Pre-trained Transformer」の略で、自動生成できるように事前訓練された変換機能という意味です。
OpenAI の GPT-3 モデルを使用すると、人と会話をしているような応答をしてくれます。
GPT-3 は、会話だけでなくブログ記事生成や小説、レポート、翻訳、プログラミングなど様々なタスクに使用することができます。
ぜひ GPT-3 の技術を理解しながら、AI チャットアプリを作ってみましょう。
デザインは TailwindCSS を使用していきます。
※2023/02
Next.js 13のApp Directoryはベータ版のため、今後ディレクトリ構成が変わる可能性があります。
システム構成
完成
目標
下記を学習していきます。
- Supabase データベース構築
- Supabase SQL Editor での構築
- OpenAI の GPT-3 とは
- OpenAI の API の使い方
- Next.js13 でデータ取得と作成、更新
動画チュートリアル
動画でも解説しています。
ぜひ参考にして下さい。
機能
- AI チャット
- 投稿取得
- 投稿保存
- 投稿更新
App Directory
Next.js 13 App Directory での構築方法の詳細はこちらを参考にしてください。
ブログを構築しながら、認証機能や作成、取得、編集、削除(CRUD)の方法を学びます。
こちらを参考にすると、認証付きのアプリを構築することができます。
エラーが発生した場合
詳しいコードの解説は、Next.js、Supabase の公式ページを参考にして下さい。
ソースコード
LINE 登録すると全ての講座のソースコードがダウンロードできます。
ぜひ登録をお願いします。
LINE お友達登録
もしエラーが発生したり、分かりにくい箇所は下記のソースコードを参考にして下さい。
前提知識
このチュートリアルを始める前に、下記は学習しておいて下さい。
- React
- Next.js
- HTML
- CSS
- JavaScript
では、始めて行きましょう！！