Prisma を使って Next.js から PlanetScale に繋ぐ

8130 ワード
テキストリンク

Next.jsのプロジェクト作成〜開発環境立ち上げ

$ npx create-next-app example-pj --typescript
$ cd example-pj
$ yarn dev

prismaの初期設定

インストールと設定ファイル作成を行う。

$ yarn add -D prisma
$ yarn add @prisma/client
$ yarn prisma init

prismaの設定変更

設定を変更する必要がある。

こちらを参照

schema.prisma
generator client {
  provider        = "prisma-client-js"
+  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider             = "mysql"
  url                  = env("DATABASE_URL")
+  referentialIntegrity = "prisma"
}

次に.envへ DATABASE_URL を設定する。

.env
+DATABASE_URL="mysql://janedoe:[email protected]/mydb?sslaccept=accept_invalid_certs"

実際接続できるか確かめる。

$ yarn prisma db pull

schema.prismaにモデルを追加後、DBへ反映するとテーブルが作成される。

$ yarn prisma format && yarn prisma db push

prisma clientに反映する。

$ yarn prisma generate

clientを用意する

lib/prisma.ts
import { PrismaClient } from "@prisma/client";

// PrismaClient is attached to the `global` object in development to prevent
// exhausting your database connection limit.
//
// Learn more: 
// https://pris.ly/d/help/next-js-best-practices

declare global {
    // allow global `var` declarations
    // eslint-disable-next-line no-var
    var prisma: PrismaClient | undefined
  }

export const prisma =
  global.prisma ||
  new PrismaClient({
    log: ['query'],
  })

if (process.env.NODE_ENV !== 'production') global.prisma = prisma

export default prisma

呼び出してレスポンスが取れるか確認する

userモデルをprisma.schemaに定義したとして。。

/pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import prisma from '@/libs/prisma'

// GET /api/users
export default async function handle(req: NextApiRequest, res: NextApiResponse) {
  const result = await prisma.user.findMany({})
  res.json(result)
}

Userテーブル内のデータが返ってきたらOK.

Swiftのprintの実装を確認
【Ruby on Rails】動作後のフラッシュメッセージ