Next.jsとPrismaとSupabaseで環境構築
Next.jsの勉強でPrismaとSupabaseを連携して、プロジェクトの作成をしてみたので、記事を書こうと思います。
Prismaとは
SQLを書かずにプログラムでデータベースの操作が可能なORM(Object-Relational Mapping)の一つで、データベースとのやり取りがより効率的で型安全になり、開発プロセスを簡素化でき、TypeScriptと組み合わせて使用することで、型エラーの検出やコードの保守性が向上します。
Supabaseとは
BaaS(Backend as a Service)で、バックエンド機能を提供するクラウドサービスの一つで、オープンソースでありPostgreSQL DBを採用している。
フロントエンドに集中したいので、バックエンドを手軽に構築できるサービスかなという感覚です。
BaaS:Webアプリやモバイルアプリが持つバックエンド機能をアプリケーションサーバー側が代行するクラウドサービス
Next.jsのプロジェクト作成
$ npx create-next-app@latest
作成したいディレクトリに移動し、上記のコマンドを実行します。
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
✔ What import alias would you like configured? … @/*
上記の画面が表示される。
$ cd my-app
$ npm run dev
作成したディレクトリに移動して実行後にhttp://localhost:3000にアクセスして、Next.jsのページが表示されたらOK!
Supabaseのプロジェクト作成
アカウントの作成からですが、私はgithubのアカウントで登録しました。
New Projectを押してプロジェクトの作成
Nameには任意の名前、DatabasePasswordは安全なレベルになるように、こちら後々使うので忘れないようにする。
プロジェクト作成に成功すると上記画面が表示される。
Prismaのマイグレーション
$ npx create-next-app@latest --typescript
$ npx prisma init
Prismaのインストールと初期化を行う。
Prismaディレクトリに.envとschema.prismaが作成される。
supabaseの左タブの一番下の歯車マークのProject Settingを押すとSettingタブが表示されるので、Databaseを選択、Connection stringのURIタブの中身を.envファイルのDATABASE_URLに貼り付ける。
[YOUR-PASSWORD]にSupabaseのプロジェクト作成で設定したDatabase Passwordを貼り付ける。
schema.prismaに設定を追加する。
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model dog {
id String @id @default(uuid())
name String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
スキーマの書き方については下記で解説してくれています。
npx prisma migrate dev --name init
マイグレーションを行う。
supabaseにテーブルが作成され、テーブル作成のSQL文も一緒に出力されます。
参考
Discussion