Supabase × Next.js の環境構築
概要
Next.js でアプリを作る際に連携するデータベースを探していたところ、なにやら Supabase なるものがあるらしいと知りました。実際に使ってみると簡単な操作でデータベース構築ができ、連携もスムーズにできたので、今後も Supabase を使っていきたいなと感じました。
そこで、初期の環境構築をテンプレ化するため、備忘録として残しておきます。
なお、本記事の内容はプログラミングチュートリアルさんの動画を参考に随時補足を加えたものになっています。なので、大まかな流れはこちらの動画をご参考ください。
使用技術
- Node.js - 18.18.2
- npm - 10.9.0
- Next.js - 15.0.3
1. Next.js プロジェクトの作成
プロジェクトを作成以下コマンドを実行してプロジェクトを作成する。なお、my-appには好きなプロジェクト名を入力してください。
npx create-next-app@latest my-app
コマンドを実行後に選択する設定は以下のように設定しました。基本的にはデフォルトと同じだが、今回はデプロイまではしないため、ESLint を導入していません。
(Turbopack についての知識がないからいつか調べたいですね)
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... No
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like your code inside a `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for next dev? ... No
√ Would you like to customize the import alias (@/* by default)? ... Yes
√ What import alias would you like configured? ... @/*
プロジェクトが作成できたらプロジェクトディレクトリに移動して、正常に動作するか確認しましょう。
cd my-app
npm run dev
2. Prisma の初期設定
Supabase のデータベースは PostgreSQL によって作られているため、Prisma を使用することができる。そのため、今回は Prisma を使って DB 操作を行うことにしました。
インストール
以下コマンドを実行して Prisma をインストールします。
npm install prisma --save-dev
npm install @prisma/client
Prisma client はコード上から Prisma で DB 操作をする際に必要みたいなので、いっしょにインストールしておきます。
Prisma の初期化
以下コマンドを実行して Prisma の初期化を行います。
npx prisma init
このコマンドを実行すると、prisma ディレクトリ、.env ファイルが作成されます。
.
├── node_modules
├── prisma
| └── shema.prisma
└── .env
3. Supabase の設定
プロジェクト作成
Supabase のログイン画面から Start your project を押して新しいプロジェクトを作成します。パスワードを設定する際は、ある程度強力なパスワードでないとプロジェクト作成ができなかったため、パスワード設定が何気に一番苦労しました。
Supabase の情報登録
作成した Supabase プロジェクトの URL、API key、データベースの URL を.envに記述すします。
プロジェクトの URL、API key はプロジェクトの Home から、データベースの URL は Project Setting > Configuration > Database から確認できます。
NEXT_PUBLIC_SUPABASE_URL=MY_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=MY_SUPABASE_API_KEY
DATABASE_URL=MY_DATABASE_URL
4. Supabase へのマイグレーション
Prisma を使って Supabase のデータベースにマイグレーションをします。
shema.prismaを編集して、各々のデータに合わせたスキーマを記述してください。
今回は Prisma の記法などはメインではないので省略しますが、参考として以下のコードを載せておきます。
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User{
id Int @id @default(autoincrement())
name String
email String
createdAt DateTime @default(now())
book Book[]
}
model Book{
id Int @id @default(autoincrement())
userId Int
title String
createdAt DateTime @default(now())
user User @relation(fields: [userId], references: [id])
}
Shema を記述したら、コマンドを実行してマイグレーションしましょう。
prisma migrate dev --preview-feature
実行が完了したら、Supabase に反映されていることが確認できるはずです。
5. アプリからデータベースの情報を読み取る
実際にプロジェクト内にコードを書いてデータが取得できているかを確認しましょう。
今回は確認することが目的なので、サンプルとして最低限のみ記述します。
.
├── node_modules
└── src
├── app
| └── page.tsx
└── lib
└──db.ts
import { PrismaClient } from "@prisma/client";
const prismaClientSingleton = () => {
return new PrismaClient();
};
declare const globalThis: {
prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;
const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();
export default prisma;
if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma;
import prisma from "@/lib/db";
async function getAllUser() {
return await prisma.user.findMany();
}
export default async function Home() {
const users = await getAllUser();
console.log(users);
return (
<div>
{users.map((user) => (
<div key={user.id}>
<div>{user.id}</div>
<div>{user.name}</div>
<div>{user.email}</div>
</div>
))}
</div>
);
}
これで Supabase にデータを挿入した後、localhost3000にアクセスすると正常にデータが取得できるはずです。
おわりに
一度アプリの環境開発をしてみても、いざもう一度作ってみようとなると忘れているところも多かったので、この記事が参考になれば幸いです。
Supabase についても詳しく知らないので、もっと調べていきたいですね。
Discussion