Next.js 프로젝트에 Prisma 추가

Prisma는 JavaScript 프로젝트에서 데이터베이스에 액세스하는 데 사용할 수 있는 매우 멋진 ORM입니다.
Prisma는 SDL(Schema Definition Language)과 함께 작동하여 마이그레이션 및 유형 안전 코드 작성을 쉽게 만듭니다.

나는 당신이 그것을 추가하고 우리가 무엇을 하고 있는지 보기 위해 행동하는 것을 봄으로써 가장 많이 배울 것이라고 생각합니다.

Next.js 프로젝트에 Prisma 추가

자, 모두가 처음부터 따라할 수 있도록 비어 있는 새 Next.js 프로젝트를 시작하겠습니다.

npx create-next-app

앱에 이름을 지정하고 이 새 폴더 내부를 탐색합니다.

그런 다음 Prisma 개발 종속성을 다음과 같이 설치해야 합니다.

npm i -D prisma

여기 있는 동안 호출을 수행하는 데 필요한 Prisma 클라이언트도 추가하겠습니다.

npm install @prisma/client

Prisma를 데이터베이스에 연결

이 예에서는 이전 문서에서 생성한 free Postgres database을 사용합니다.

Prisma를 초기화하기 위해 프로젝트 내에서 이 명령을 실행할 수 있습니다.

npx prisma init

이렇게 하면 데이터베이스에 대한 .env 파일에 새 항목이 추가되고 더 중요한 것은 prisma/schema.prisma 파일이 생성됩니다.

이 파일은 우리가 필요로 하는 모든 정보를 담고 있기 때문에 작업의 핵심입니다.

이 파일을 열고 첫 번째 모델을 추가해 보겠습니다.
재생 목록 모델을 추가하겠습니다.

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

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

model Playlist {
  id           Int    @default(autoincrement()) @id
  title        String
  image        String
  uri          String
}

보시다시피 재생 목록의 유형 정의는 매우 간단합니다.
그 위에는 Prisma에 필요한 구성이 있습니다.

그런 다음 .env 파일을 열고 DATABASE_URL를 Heroku Postgres URL(또는 다른 Postgres URL)로 변경합니다.

이제 이 스키마를 데이터베이스로 푸시해야 합니다. 다음 명령을 실행하여 이를 수행할 수 있습니다.

npx prisma db push

완료되면 데이터베이스를 열 수 있으며 다음 표를 볼 수 있습니다.



그런 다음 테스트 목적으로 이 데이터베이스에 레코드를 직접 추가했습니다.

Next.js에서 데이터베이스 사용

이 데이터가 준비되면 Next.js 앱에서 데이터를 사용해 볼 수 있습니다.

Prisma 클라이언트가 스키마와 함께 최신 상태인지 확인하려면 스키마가 변경될 때마다 다음 명령을 실행해야 합니다.

npx prisma generate

데이터를 검색하기 위해 테스트할 수 있는 간단한 API 호출을 만들어 보겠습니다.
playlists.js 폴더 안에 pages/api 파일을 만듭니다.

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

const prisma = new PrismaClient();

export default async function handler(req, res) {
  const playlists = await prisma.playlist.findMany();
  res.json(playlists);
}

여기에서 Prisma 클라이언트를 로드하고 playlist 테이블에 대해 클라이언트를 쿼리합니다. 거기에서 findMany 쿼리를 실행합니다.

그러면 개체 배열이 생성됩니다.

[
   {
      "id":3,
      "title":"Chris super chill mix",
      "image":"https://i.scdn.co/image/ab67706c0000bebbf036b60da9286ccbc023a6f1",
      "uri":"spotify:playlist:1E8HDaDy8mM2otQwsFqRiD"
   }
]

이제 첫 번째 스키마를 생성하고 이를 데이터베이스에 푸시한 다음 Prisma를 통해 쿼리했습니다!

GitHub에서 전체 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나