【Next.js】Prismaをつかってみたい

PostgreSQL

 

Node.js および TypeScript のORMであるPrisma

Next.jsでつかってみたいので、設定していきます!

 

本記事は、Prismaに焦点を当てています。
  Node.js、Docker、PostgreSQLの解説は詳しく書きません。

 

そもそも ORM とは?

 

ORM(Object Relational Mapper)とは、オブジェクト指向のようにRDBを操作できるもの。

SQLを書く必要がなく、プログラミング言語とRDBの間を取り持ってくれるというイメージ。

 

つまり、プログラム ↔ ORM ↔ RDB となります。

 

あらためて Prisma とは?

 

What is Prisma ORM? (Overview) | Prisma Documentation
This page gives a high-level overview of what Prisma ORM is and how it works. It's a great starting point for Prisma newcomers!

こちらの公式ドキュメントによると、

プリズマは、オープンソース次世代ORM。これは次の部分で構成されます。

  • Prisma Client : Node.js および TypeScript 用の自動生成されたタイプセーフなクエリ ビルダー

  • Prisma Migrate : 移行システム

  • Prisma Studio : データベース内のデータを表示および編集するための GUI。

Prisma Studioのみオープンソースではない点にご注意ください!

 

Node.js や TypeScript用のORMということですね。

 

Prisma が必要としている要件やサポートしているバージョンは下記をご覧ください!

・要件

System requirements (Reference) | Prisma Documentation
System requirements for running Prisma ORM

 

・サポートされているフレームワーク

Building fullstack applications with Prisma ORM | Prisma Documentation
This page gives explains how to build fullstack applications with Prisma. It shows how Prisma fits in with fullstack frameworks and provides practical examples

 

・サポートされているDB

Databases supported by Prisma ORM | Prisma Documentation
This page lists all the databases and their versions that are supported by Prisma ORM.

 

バージョン

 

バージョン
Prisma 5.2.0
Prisma Client 5.2.0
Prisma Studio 0.494.0
Node.js 18.17.0
Next.js 13.4.19
Docker 20.10.21
PostgreSQL 15.4

 

完成したアプリケーション

 

GitHub - hisuihisui/sample-prisma-next-app: sample-prisma-next-app
sample-prisma-next-app. Contribute to hisuihisui/sample-prisma-next-app development by creating an account on GitHub.

こちらのGitHubリポジトリに完成したアプリケーションをpushしました。

ご参考ください!!

 

下準備

Next.jsのアプリを作成

 

もととなるNext.jsのサンプルアプリを作成します。

コマンド実行後にきかれるものはすべてデフォルトのままにしておきます。

 

作成出来たら、動くか確認しておきます

 

http://localhost:3000 にアクセスして、表示されればOKです!

 

PostgreSQL コンテナを起動

 

↓を参考にコンテナを起動していきます。

【Docker】postgresqlの構築

 

PostgreSQL コンテナ用のフォルダを作成します。

ファイルの構成は以下とします。

 

各ファイルの中身はこんな感じ

 

 

 

ユーザー名やデータベース名、スキーマ名は
わかりやすいようにprisma***にしていますが、なんでもいいです

 

 

ファイルを作成したら、コンテナを起動して入ってみます

 

うまく起動できているのでこれでOKです!

 

Prismaをつかってみる

 

Next.jsアプリのルートディレクトリに移動して下さい

 

Prismaをインストール

 

 

–save-dev をつけるのはなぜなのかは↓の記事を読んでみるとわかると思います

npm install の --save-dev って何? - Qiita
npm install --save-dev の --save-dev ってなんだ?と思って調べたのでメモ。--save-dev が気になったきっかけVue.jsのアプリを簡単にS3にアップロー…
【いまさらですが】package.jsonのdependenciesとdevDependencies - Qiita
package.jsonのdependenciesとdevDependenciesの使い分けについて、いまさらですがまとめます。#dependenciesとdevDependenciesの違い例…
【package.json】dependenciesとdevDependenciesの違いとnpmとyarnのコマンド解説
dependenciesとdevDependenciesの違いとnpmとyarnのコマンドを解説しました。合わせて、peerDependenciesなどの他のdependenciesも紹介しています。

 

Prismaをセットアップ

 

↑のコマンドを実行します。

PostgreSQL以外を使用する方は、datasource-provider オプションで指定します。(参考

 

これによって

  1. prismaフォルダとその配下にschema.prismaを作成
  2. .env を作成 ※gitにコミットしないように.gitignoreに.envを追記しましょう

がなされます。

 

(実行結果)

 

DBの接続情報を設定する

 

先ほど作成されたschema.jsonの中身を見てみます

 

このうち、DBに関する記述は8~11行目のdatasource db の部分になります

 

プロパティ 説明
provider
使用するDBの種類
“postgresql”
url
DBの接続情報
env(“DATABASE_URL”)

 

url は値を直書きせずに、DATABASE_URL という環境変数から読み取るようになっています

そこで、schema.json と一緒に作成された .env ファイルをみます

 

DATABASE_URL が定義されているので、値を書き換えていきます。

PostgreSQLの場合は、下記のフォーマットになっています

 

筆者の場合は、

プロパティ 設定値
USER
prismauser
PASSWORD
prismapassword
HOST localhost
PORT
5432
DATABASE
prismadb
SCHEMA
prismaschema

となるので、.env を

に書き換えます

 

Prisma Migrateしてみる

 

schema.prismaでData Modelを定義して、DBに反映してみます

 

まず、schema.prismaにData Modelを定義します

 

↓のコマンドでschema.prismaの内容をDBに反映させます。

 

これで2つのことが実行されます

  1. schema.prismaをもとに、DBに実行する用のSQLファイルを作成
  2. 1. で作成されたSQLファイルをDBに実行する

 

(実行結果)

 

エラーが出た方は↓を参考にしてみてください

 

 

成功したら、prismaフォルダにmigrationsフォルダとSQLファイルが作成されています

 

migration.sqlを見てみると、

schema.prismaで定義した3つのData Modelに対応する3つのテーブルを作成しています

 

Prisma Client をインストール

 

PrismaをNext.jsのアプリから呼び出せるようにPrisma Clientをインストールします

 

こちらのコマンドを実行すると、

  1. パッケージのインストール
  2. prisma generate : schema.prisma で定義した内容をPrisma Clientへインポート

を行います。

prisma migrate や prisma db push を実行した際にも
prisma generate が実行され、
Prisma Clientが更新されます

 

(実行結果)

 

Prisma Clientをつかってみる

 

Next.jsアプリ内でPrisma Clientを使って、DBへのデータの読み書きを行います

 

下記のようなアプリケーションを作成してみます

  • プロフィールとともにユーザーを登録する
  • 登録されているユーザー一覧を取得し、表示する

 

ディレクトリ構成

 

 

コード

 

・src/app/global.css

これがあると画面が見づらいので中身を空にしておきます

 

src/app/page.tsx

後述するコンポーネントを呼び出します

 

src/app/user/route.ts

Prisma Clientを使用してDBとやり取りする処理をAPI化しておく

http://localhost:3000/api/user がエンドポイントになります

 

src/components/addUser.tsx

ユーザー登録を行うコンポーネント

 

src/components/userList.tsx

ユーザー一覧を表示するコンポーネント

 

src/lib/prisma.ts

ベストプラクティスに沿って、Prisma Clientをシングルトンにしておきます

このファイルでのみPrisma Clientをインスタンス化し、ほかのファイルから呼び出します

 

 

動作確認

 

できたら、サーバーを立ち上げます

 

http://localhost:3000/ にアクセスして、↓のように表示されると思います

 

各項目を埋めて「追加」ボタンをクリックしてください。

All Usersの下に登録したユーザーが表示されれば、データの読み書きともにうまくいってそうです。

(例えば↓のような感じです)

 

動作確認が終わったら、Ctrl+C等でアプリを終了させてください

 

Prisma Studioをつかってみる

 

Prisma Studio(データベース内のデータを表示および編集するための GUI)を起動させてみます。

 

すると、ブラウザに自動で表示されます

ここから、テーブルやレコードの状態を確認できます

 

最後に

 

Prisma のチュートリアルを通して、Next.jsで使ってみました

ORMは便利ですねーー!

Prisma をGraphQLと組み合わせても面白そうなので、挑戦してみます。

 

本記事でさくせいしたアプリをVercelへデプロイしてみたい方はこちらもチェック

 

エラー集

 

・prisma migrate でのエラー

【Prisma】prisma migrate でエラーが出るので解決していく
prisma migrateを実行したのですが、いくつかエラーが出ました。 対応した記録を記事として残しておきます。 同じような状況になっている方の参考になればうれしいです 現状 Next.jsのアプ...

 

・Prisma Clientでのエラー

【Next.js】Prisma ClientはClient Componentではつかえない??
Next.js(App Router)でPrisma Clientを使用したところ、エラーに遭遇しました。 Componentが原因で起こったエラーっぽいですが、よくわからなかったのでまとめました! バージョン ...

 

参考文献

 

Start from scratch with Prisma ORM | Prisma Documentation
Learn how to create a new Node.js or TypeScript project from scratch by connecting Prisma ORM to your database of choice and generating a Prisma Client for data...
About the shadow database | Prisma Documentation
About the shadow database
【Docker】postgresqlの構築
PrismaでRLSを使う
DockerでPostgreSQLを起動して、sqlファイルを読み込ませ、実行する - Qiita
Windows10、Docker Desktopで動作確認をしました。まずは任意のSQLファイルを作成します。ここではa.sqlとして保存しました。create database shop;…
Routing: Route Handlers | Next.js
Create custom request handlers for a given route using the Web's Request and Response APIs.
fetchメソッドの基本的な使い方【クエリパラメータとリクエストボディの使い分け】
Fetch APIでJSON形式のデータを送信する | GRAYCODE JavaScript
Fetch APIのAjaxを使ってJSONデータをサーバーへ送信する方法について解説します。

 

コメント

タイトルとURLをコピーしました