初めまして！くるりんぱです。Next.jsとSupabase,Prismaを用いてWebアプリを作成している際につまづいた点があったのでQittaにまとめたいと思います。
具体的には自分のプロフィールを登録して、マイページで表示するという機能を実装している際に、画像の保存と表示の仕方に苦戦しました。
手順
1. Prismaを用いてSupabaseのDatabaseに画像のurlを保存するテーブルを作成する。
Prismaのモデル
model Dog {
id Int @id @default(autoincrement())
name String
photoUrl String
breed String
userId String
}
私は上記のようにして犬のプロフィール画像のurlを保存するDogというテーブルを作成しました。
※schema.prismaファイルにてモデルを定義した後、
npx prisma migrate dev --name init
というコマンドでmigrationをすると、supabase上にテーブルが作成されます。
2.画像をアップロードするためのフォームを作成する。
フォームの作成方法は色々ありますので、自分に合ったもので良いかと思います。
私は以下のように作成しました。
3.画像のアップロードの処理を書く
この処理の流れを一つずつ説明します。
まず、event.preventDefault()でフォームのデフォルトの送信動作をキャンセルします。次に選択されたファイルが画像であるかチェックした後に、画像ファイルのパスをランダムに作成します。(UUIDを用いることで一意のパス名を作成することができます。)
そして、supabaseのstorageに画像をアップロードします。エラーの際にはアラートが表示されるように実装しています。
4.アップロードした画像のURLを取得し、テーブルに保存する
アップロードした画像のURLを取得する際にはバケットがprivateかpublicであるかで方法が異なります。今回、私はバケットをprivateで作成したのでその方法を以下に表示します。
createSignedUrlを用いて、storageに保存されている画像のurlを取得します。そして、そのurlをdatabaseに保存する処理をpostDogで行うようになっています。
最後に
この3ステップで画像をsupabaseのstroageに保存し、保存した画像のurlをdatabaseに保存することができます。そのため、テーブルからurlを取得して、アイコンや画像としてページに表示することが容易にできるようになります。