はじめに

ORMとしてprismaをよく使用しています。そこでセットアップ方法を記録しておくために投稿します。データベースには勉強のためにVercel Storageを使用しています。

開発環境

• Nextjs:14.2.5(App Router)
• React:^18
• Prisma:5.17.0

Nextjsの雛型は事前に用意しておいてください。nodejsやgitの環境構築は解説しません。

Prismaのセットアップ

prismaのインストール

以下のコマンドでprismatとprisma clientをインストールします。

npm install @prisma/client prisma 

スキーマの定義

インストールしたら以下のコマンドでスキーマを定義するファイルを生成します。

npx prisma init

同時に.envファイルも作成されますが後ほど編集します。

生成されたprismaフォルダーのscherma.prismaファイルに編集してスキーマを定義します。

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("POSTGRES_PRISMA_URL")
  directUrl = env("POSTGRES_URL_NON_POOLING")
}

model Article {
  id     String      @id @default(cuid())
  title   String
  content String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  categories Category[]
}

model Category {
  id     String @id @default(cuid())
  name   String
  articles  Article[]
}

このモデルは簡単なブログのスキーマを定義しています。Articleモデルはタイトルと本文とカテゴリーを有しており、そのカテゴリーは中間テーブルを介してCategoryモデルと多対多の関係にあります。

prismaは多対多にしたい各モデルに配列を持たせるだけで中間テーブルを定義することができるので便利です。

Vercel Storageへの接続

Vercelのダッシュボード画面のStorageをタップしてPostgresデータベースを作成します。

Regionに日本がないので一番近いシンガポールにしました。

作成したデータベースプロジェクトの.envlocalをコピーして、prismaによって生成された.envファイルにペーストします。

以下のコマンドでローカル環境とデータベースを接続します。

npx prisma migrate dev --name init

ダッシュボードを確認してみるとスキーマが作成されています。また、自動で中間テーブルの_CategorytoArticleが生成されています。

おまけ(本番環境の設定)

本記事は基本的にローカルでの開発を前提にしています。githubでVercelの本番環境にデプロイしたい場合は以下のことを行ってください。

• gitignoreファイルに.envを追記する。
• ビルド前に環境変数をVercelプロジェクトにアップロードまたは手動入力する。
• package.jsonファイルを編集する。

//以上略
"scripts": {
    "dev": "next dev",
    "build": "prisma generate && prisma db push && next build", //追記
    "start": "next start",
    "lint": "next lint"
  },
//以下略

"build"にprismaの設定を追記してください。

まとめ

今回はNextjsでprismaを用いたVercel Storgaeのセットアップ方法を紹介しました。次回はデータの投稿と取得する機能をServer Actionで実装する方法を投稿します。

参考文献

Using an ORM to access your Postgres database

vercel.com/docs/storage/vercel-postgres/using-an-orm

Vercel Postgres + Prisma Next.js Starter

vercel.com/templates/next.js/postgres-prisma