prisma 설치 및 Next.js 프로젝트에 적용

prisma 설치

npm: prisma

npm i prisma

설치를 한 뒤에 사용할 수 있는 명령어는 아래와 같다.

Examples

  Set up a new Prisma project
  $ prisma init

  Generate artifacts (e.g. Prisma Client)
  $ prisma generate

  Browse your data
  $ prisma studio

  Create migrations from your Prisma schema, apply them to the database, generate artifacts (e.g. Prisma Client)
  $ prisma migrate dev

  Pull the schema from an existing database, updating the Prisma schema
  $ prisma db pull

  Push the Prisma schema state to the database
  $ prisma db push

  Validate your Prisma schema
  $ prisma validate

  Format your Prisma schema
  $ prisma format

  Display Prisma version info
  $ prisma version

  Display Prisma debug info
  $ prisma debug

설치가 완료되었다면 아래의 명령어로 prisma를 프로젝트에서 사용할 수 있도록 세팅한다.

npx prisma init

How to Build a Fullstack App with Next.js, Prisma, & PostgreSQL

step 1. .env 파일에 내 데이터베이스 설정하기

• .env 파일을 생성한 후에 .gitignore파일에 작성해서 git에 올라가지 않도록 주의한다.

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

DATABASE_URL="postgresql://[사용자이름]:[사용자비밀번호]@localhost:5432/[데이터베이스 이름]?schema=public"

step 2. prisma 폴더 아래 schema.prisma 파일에서 연결

• prisma를 설치한 뒤에 npx prisma init 을 하면 생기는 prisma 폴더 아래 파일이다.

// prisma 클라이언트 라이브러리
generator client {
  provider        = "prisma-client-js"
}

// .env 파일에서 저장해놓은 db url, prisma가 연결할 데이터베이스 정보
// 여기서 사용할 db는 postgreSQL
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

step 3. 데이터 모델 설정하기

• 저는 여기서 사용자 기반 게시판을 만들어서 게시글을 저장할 Post 모델과 사용자를 저장할 User 모델을 작성했습니다.

• 아래 게시해놓은 prisma models 페이지에 예시와 자세한 설명이 있으니 데이터 모델은 각각 자신의 프로젝트에 맞게 설정해 주세요.

Models

model Post {
  id         Int        @id @default(autoincrement())
  title      String
  content    String?
  createdAt  DateTime   @default(now())
  updatedAt  DateTime   @updatedAt
  author     User   @relation(fields: [authorId], references: [id])
  authorId   String  // 여기 필드가 관계에 사용되고 있기 때문에 옵션 맞춰줘야함.
}

model User {
  id            String     @id
  name          String
  email         String     @unique
  createdAt     DateTime   @default(now())
  posts         Post[]
}

• id: @id로 기본 키를 나타내고, @default(autoincrement())는 ID 값이 자동으로 1씩 증가하는 값이다.

• email: String 타입이며, @unique는 이 값이 고유해야 함을 의미한다. id와 마찬가지로 유일한 값이어야 한다.

• name: String?는 이 필드가 null 값을 허용한다는 의미.

• author: User 모델과의 관계를 나타낸다.

  • @relation(fields: [authorId], references: [id])는 이 게시글이 User 모델의 id 필드와 Post 모델의 authorId 필드와 연결된다. 게시글의 작성자를 의미한다.

  • User 모델에 있는 사용자만이 작성자가 될 수 있다.

• createdAt: DateTime 타입이며, 기본 값은 now()로 현재 시간이 자동으로 저장된다.

name String?  // null 값을 가질 수 있음 (옵션 필드)
email String  // 반드시 값이 있어야 함 (필수 필드)

step 4. npx prisma db push 와 npx prisma studio

npx prisma db push

• 위의 명령을 사용해서 우리가 만든 테이블을 push 한다.

• 에러가 났다면 에러코드를 살펴보고 완료가 되었다면 다음 명령을 사용하여 우리가 만든 테이블을 확인할 수 있다.

• 또한 bash에서 \\dt 를 확인했을 때 docker에 띄운 postgres와 연결된 것도 확인할 수 있다.

• push가 완료되었다면 npx prisma studio를 사용하여 웹에서 테이블을 확인할 수 있다.

db push 와 migrate dev 의 차이

• npx prisma db push는 빠르게 데이터베이스 스키마를 적용하고 싶을 때

• npx prisma migrate dev는 마이그레이션을 통해 변경 사항을 기록, 관리하고 싶을 때(권장)

npx prisma migrate dev --name [migrate file name]

위의 명령어를 진행하며 변경 사항이 파일에 기록된다.

• 모델을 적용한 뒤에 마이그레이션 진행 후 생성된 파일

• post 테이블에 새로운 컬럼을 추가했을 때

step 5. prisma client 설치

npm install @prisma/client

• 스키마가 변경될 때마다 아래의 명령어를 실행한다.

npx prisma generate

step 6. src/lib/db.ts 파일 생성해서 prisma client 사용하기

• 아래 게시해 놓은 글은 prisma client를 인스턴스화하는 모범 사례를 소개하고 있다.

Best practice for instantiating Prisma Client with Next.js

• 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

• client 인스턴스를 계속 만들어서 사용하지 않고 src/lib/db.ts 경로에서 prisma를 사용한다.

// 이 경로로 import해서 사용한다.
import prisma from "@/lib/db";

• 그다음에 src/actions/actions.ts 파일을 생성한 다음에 use server 을 작성하여 서버 컴포넌트로 만들고

'use server';

import prisma from "@/lib/db";
import { redirect } from 'next/navigation';

// 게시물 작성
export async function createPost(formData : FormData) {

    await prisma.post.create({
        data: {
          title: formData.get('title') as string,
          content: formData.get('content') as string,
          authorId: formData.get('authorId') as string,
        },
      });
      redirect('/board');
}

• 위의 코드처럼 함수를 정의해서 prisma를 사용해 post에 데이터를 db에 저장한다.

참고자료

• prisma 활용

  • Next.js Database with Prisma | Next-Generation ORM for SQL Databases