[Next] Next.js에서 Prisma(mongoDB)사용하기

1. Prisma란?

Prisma는 ORM(Object-relational-mapping). 객체와 DB데이터 테이블 간 매핑을 관리하며 자바스크립트 또는 타입스크립트 객체로 다룰 수 있다. 그래서 SQL쿼리를 직접 작성하지 않아도 된다.

 

2. Prisma Client 설치하기

Prisma는 ORM을 사용하기 위해 Prisma Client를 먼저 설정해줘야 한다.

npm i prisma --save-dev
npm i @prisma/client
npx prisma init

prisma 프로젝트를 설정하기 위해 npx prisma init 명령어를 입력해주면

.env파일과 prisma 폴더 안에 schema.prisma 스키마 파일이 생성된다.

 

// schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// .env
DATABASE_URL="mongodb+srv://userName:<password>@cluster0.zpxrtqh.mongodb.net/test"

provider엔 사용할 DB 종류(mysql, mongodb...)를 입력해주면 되고 url은 .env에 작성할 DB URL 정보를 불러온다.

.env 파일엔 사용할 DB URL 입력하기

 

3. Prisma DB 연결하기

스키마를 생성하기 위해 schema.prisma에 아래처럼 코드를 작성해줬다.

model Post {
  id  String @id @default(auto()) @map("_id") @db.ObjectId
  title String
  desc String
  image String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt 
}

id는 자동생성된 값을 사용하도록 하고 DB에선 "_id" 이름으로 저장되게 된다.

그 다음 npx prisma generate 명령어를 입력하면 모델을 기반으로 타입스크립트 또는 자바스크립트 코드가 생성된다.

그리고 이 스키마를 DB에 푸시하기 위해 npx prisma db push를 입력해준다.

 

 

이제 클라이언트 파일을 구성하기 위해 app폴더에 libs 폴더를 생성 후 아래 코드를 입력해주면 DB와 상호작용할 수 있다.

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

declare global {
  var prisma: PrismaClient | undefined;
}

const client = globalThis.prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") globalThis.prisma = client;

export default client;

 

prisma를 전역에 사용하기 위해 변수를 선언.

개발환경에서만 globalThis.prisma에 클라이언트를 할당하고 프로덕션 환경에선 필요할 때 마다 새로운 클라이언트를 생성해서 DB 연결을 유지하도록 한다.

 

4. Prisma 시작하기

이제 POST메서드를 처리하기 위해 라우팅을 해야하는데 app폴더 안에 api 폴더 생성하고 posts폴더를 생성 후 route.ts 안에 라우트 핸들러 함수를 작성한다. 

// route.ts

import prisma from "@/app/libs/prismadb";
import { NextResponse } from "next/server";

export const POST = async (req: Request) => {
  try {
    const { title, desc } = await req.json();
    const newPost = await prisma.post.create({
      data: {
        title,
        desc,
      },
    });

    return NextResponse.json(newPost);
  } catch (err) {
    return NextResponse.json(
      { message: "추가하지 못했습니다.", err },
      { status: 500 }
    );
  }
};

NextResponse를 사용하면 응답을 쉽게 생성, 제어할 수 있다.

post 테이블에 데이터를 삽입하기 위해 prisma.post.create메서드로 data객체를 전달한다.

 

포스트맨으로 테스트하고 mongoDB에도 잘 들어가있다.