NextJS + Prisma + PlanetScale

일전의 포스트에서 PlanetScale과 Prisma를 연동했다면, 이제는 NextJS와 Prisma를 연동할 차례입니다.

API 파일 생성

NextJS는 pages 폴더 내부에 api라는 폴더를 만들어 API들을 일괄적으로 관리합니다.

---

PrismaClient 설치

Prisma Client 설치 (MongoDB의 Mongoose와 비슷한 친구입니다.)

npm install @prisma/client

이러면 준비는 끝났습니다.

해당 라이브러리에서 PrismaClient라는 Class를 import해 인스턴스를 생성하면 PlanetScale을 핸들링할 수 있습니다.

---

인스턴스 생성하기

//client.ts
import { PrismaClient } from "@prisma/client";
const client = new PrismaClient();

export default client;

utils 폴더에서 관리하시면 됩니다.
해당 인스턴스(client)로 PlanetScale. 즉, DB를 핸들링합니다.

---

데이터 생성하기

//createUser.tsx

import { NextApiRequest, NextApiResponse } from "next"; //TypeScript를 위한 타입입니다.
import client from "../../libs/client"; //위에서 만든 인스턴스

export default async function createUser(
  req: NextApiRequest,
  res: NextApiResponse
) {
  await client.user.create({ data: { name: "goose" } });
  
  console.log("ADDED!");
}

• async/await : client가 가지고있는 create 메서드는 Promise를 return합니다. 따라서 비동기처리 해주었습니다.

코드를 작성하고 {root_url}/api/{파일명}로 GET요청(접속)하면 해당 코드가 실행됩니다.

---

어떻게 쓸 것인가?

이러한 기능을 어떻게 사용하느냐부터는 응용의 문제인 것 같습니다.
위에서 유저를 생성하는 코드는 프론트와 접목한다면 아래와 같이 사용할 수 있겠습니다.

Create

• 프론트의 Form에서 User의 입력
• 데이터 검증
• Submit
• 해당 데이터 담아 api주소로 get요청
• PrismaClient를 사용해 api파일 내부에서 데이터 추가

또한, PrismaClient의 공식문서에서 CRUD에 친절히 설명하고 있으니, 이를 읽어보시는 것을 추천드립니다.

> 공식문서