🌟

【NextJs14】NextJs14 と便利なライブラリ【#２８Prisma Client】

2024/02/06に公開

Next.js

Prisma

neon

tech

【#２８Prisma Client】

YouTube: https://youtu.be/m9GpAOUIbYs

https://youtu.be/m9GpAOUIbYs

今回はスキーマの調整とPrismaClientの初期設定を行います。

prisma/schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

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

datasource db {
  provider  = "postgresql"
  url  	    = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

model Todo {
  id String @id @default(cuid())
  title String
  isCompleted Boolean
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

コード内でモデルを使用できるようにする
npx prisma generate

モデルをデータベースに反映する
npx prisma db push

次にPrismaClientの初期設定を行います。
以下の設定でNextJsでホットリロードのたびに
PrismaClientが初期化されるのを防止できます。

lib/db.ts

import { PrismaClient } from "@prisma/client";

declare global {
  var prisma: PrismaClient | undefined;
}

export const db = globalThis.prisma || new PrismaClient();

if (process.env.NODE_ENV !== "production") globalThis.prisma = db;

参考はこちらです。

【#２８Prisma Client】

Discussion