NextJS + Prisma + PlanetScale

pengooseDev·2022년 11월 28일
0

일전의 포스트에서 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에 친절히 설명하고 있으니, 이를 읽어보시는 것을 추천드립니다.

> 공식문서

0개의 댓글