T3 Stack で Supabase をセットアップする
T3 Stack で構築した Next.js 環境に Supabase をセットアップして DB を使える様にするまでにやったことのメモです。
T3 Stack も Supabase も最近使い始めたばかりなので詳しいことはあまりわかっていないので、曖昧な部分も多くありますが、とりあえず以下の手順でセットアップはできました。
今回使う技術について
T3 Stack
Next.js でタイプセーフにアプリを開発するためのセットです。
TypeScript, tRPC, Prisma, Tailwind CSS, NextAuth.js などが含まれていて、CLIでそれらのセットアップが完了します。
個人的にこの構成はとても好みに合っていて、もし小さく個人開発するのであればこの構造が一番良いなと思っています。
Web とアプリでフロントを二つ以上作るとかであれば tRPC の部分を GraphQL にします。
Supabase
Firebase の RDB 版（PostgreSQL）というイメージです。
いつもは Firebase を使うことが多いですが、タイプセーフということで Prisma を使う前提だと Supabase の方が良いっぽいので、こちらを使います。
T3 Stack をセットアップする
バージョンは以下で進めました
node v18.15.0
npm 9.5.0
以下のコマンドでプロジェクトを作成します。
npm create t3-app@latest
Auth は Supabase のものを使えばいいかなと思ったので、使うパッケージは prisma, tailwind, trpc に絞りました。
実行時の選択肢はこんな感じです。
インストールはこれで完了です。
あとは指示に合わせて起動して見ます
cd [プロジェクト名]
npx prisma db push
npm run dev
立ち上がりました。
Supabase をセットアップする
ログインして新しいプロジェクトを作ります。
詳細は省きますが、何も見なくても特に詰まることなく作ることができると思います。
途中で Database password というものを設定する必要がありますが、これは後で使うのでメモをしておきます。
.env に３つの値を設定する
これ を参考に .env に値を設定していきます。
僕は途中でエラーが出たりしましたが、結局以下の形に落ち着きました。
-
DATABASE_URL- Prisma Client から接続するために使う値
-
Settings > Database > Connection stringの値に?pgbouncer=trueを足したもの
-
DIRECT_URL- マイグレーションなどで使う値
-
Settings > Database > Connection Pooling > Connection stringの値
-
NEXT_PUBLIC_SUPABASE_ANON_KEY- Supabase に接続するためのAPIキー
-
Settings > API > Project API keysの乱数
DATABASE_URL="postgresql://postgres:[Database passwordのパスワード]@db.[Reference ID].supabase.co:5432/postgres?pgbouncer=true"
DIRECT_URL="postgres://postgres:[Database passwordのパスワード]@db.[Reference ID].supabase.co:6543/postgres"
NEXT_PUBLIC_SUPABASE_ANON_KEY="長い乱数"
prisma.schema の記述を修正
以下の記述を追記すればクライアントからも CLI からも Supabase へのアクセスができる様になっていると思います。
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
directUrl = env("DIRECT_URL")
}
まとめ
以上、T3 Stack で Supabase を接続するための設定方法でした。
接続に困っている人の役に立てば幸いです。
Discussion