はじめに
こんにちは。
現在、フロントエンドエンジニアを目指して勉強しているLienです。
ポートフォリオとして、動物病院向けWebアプリ Vet Clinic Assistant を開発しています。
このアプリでは、
- 患者情報の管理
- 診察内容の記録
- 音声録音
- AIによる診療サポート
といった機能の実装を目標にしています。
今回は「相談データを保存し、一覧画面で表示する機能」を実装したので、その開発内容をまとめます。
完成イメージ
今回完成した機能はこちらです。
実装した機能
- 相談内容の保存
- 患者情報の保存
- 録音ファイルのアップロード
- 保存した相談一覧の表示
対象読者
この記事は次のような方向けです。
- Next.js(App Router)を勉強している方
- Supabaseを使ってみたい方
- Server Actionを触ってみたい方
- 個人開発を始めたい方
開発環境
今回使用した技術はこちらです。
- Next.js 15
- React
- TypeScript
- Supabase
- Tailwind CSS
今回実装したかったこと
最初の状態では、画面は完成していました。
しかし、「Save consultation」ボタンを押しても何も起きません。
原因は単純で、保存処理がまだ実装されていなかったからです。
今回は以下の流れが動作することを目標にしました。
患者情報入力
↓
録音
↓
Supabase Storageへアップロード
↓
相談内容をDatabaseへ保存
↓
相談一覧へ表示
Supabaseで相談データを保存する
録音データだけStorageへ保存しても、相談一覧は表示できません。
そのため、
- 音声ファイル → Storage
- 患者情報・相談内容 → Database
という役割に分けました。
保存するカラムは次のようにしました。
- patient_name
- owner_name
- symptom
- audio_path
- created_at
Storageにはファイル本体、DatabaseにはStorageのパスだけを保存しています。
Server Actionを使って保存
今回はNext.jsの Server Action（サーバー側で実行される処理） を利用しました。
最初はAPI Routeを作る必要があると思っていましたが、Server Actionを使うことでフォームから直接保存処理を実行できます。
個人的には「APIを書かなくても保存できる」という点がとても便利だと感じました。
実際にハマったこと
一番時間がかかったのは環境構築でした。
途中で次のエラーが表示されました。
Missing required environment variable:
SUPABASE_SECRET_KEY
最初は焦りましたが、.env.local に必要なキーを追加し、開発サーバーを再起動すると解決しました。
もう一つ苦戦したのがRLS（Row Level Security）です。
テーブルを作っただけではデータを取得できず、「Policy」を設定する必要があることを初めて知りました。
実際に触ってみないと分からないことが多いですね。
次回やりたいこと
今回で相談データを保存できるようになりました。
次は以下の機能を追加する予定です。
- Whisperによる音声文字起こし
- OpenAIによる診療内容の要約
- 患者ごとの診療履歴表示
おわりに
今回の開発では、Next.jsとSupabaseを組み合わせることで、実際にデータを保存・取得する流れを実装できました。
画面だけではなく、「ユーザーの操作がDatabaseまでつながる」という一連の流れを理解できたことが一番の収穫だったと思います。
まだまだ開発途中ですが、少しずつ機能を追加しながら完成を目指していきます。
最後まで読んでいただき、ありがとうございました！