nextjs + prisma + suspabase 연동 가이드

 

Next.js 프로젝트를 생성한 후 Prisma와 Supabase를 설정하여 연동하는 과정을 진행합니다. 각 패키지가 무엇인지 알고 있다고 가정하고 바로 설정하는 단계 설명으로 갑니다.

 

Next.js 프로젝트 생성

Nextjs 를 설치해줍니다. 현재 설명하는 버전은 15버전 입니다. 13버전 이상이라면 크게 상관없습니다.

npx create-next-app@latest [프로젝트 이름]

 

 

Prisma 설정하기

Prisma 에 대한 기본 설정 입니다. 자세한 설명 보다는 필요한 부분만 언급하고 넘어갑니다.

Prisma 설치

npm install prisma --save-dev npm install @prisma/client

 

Prisma 초기화

npx prisma init

 

이 명령어를 실행하면 schema.prisma 파일과 .env 파일이 생성됩니다.

• schema.prisma: 데이터베이스 스키마 정의 파일.
• .env: 환경 변수 설정 파일.

 

schema.prisma 파일 설정

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

datasource db { 
	provider = "postgresql" 
	url = env("DATABASE_URL")  
	directUrl = env("DIRECT_URL") // 이 부분이 중요합니다. 빼먹지 맙시다.
}

 

 

.env 파일 설정

본격적인 설정에 앞서 필요한 환경변수의 토대를 만들어줍니다.

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

 

.env 파일은 당연히 중요한 정보를 저장하는 파일이므로 .gitignore에 추가해야 합니다. 아래는 설정하는 예시 입니다.

echo ".env" >> .gitignore

 

이제 Prisma의 기본 설정이 완료되었습니다. 이제부터, Supabase 설정으로 넘어 갑니다.

 

Supabase 설정하기

Supabase 계정 생성 및 프로젝트 설정

• Supabase 홈페이지에서 계정을 생성합니다.
• Dashboard로 이동하여 새 프로젝트를 생성합니다.
• New Project 버튼을 클릭한 후 프로젝트 이름, 비밀번호, 리전을 설정하여 데이터베이스를 생성합니다.

데이터베이스 URL 확인

• Dashboard 화면에서 Connect 버튼을 클릭한 후 URI 탭에서 데이터베이스 URL을 확인합니다.
• 이를 .env 파일의 DATABASE_URL과 DIRECT_URL에 설정합니다. 

 

 

.env 설정

# Connect to Supabase via connection pooling with Supavisor.
DATABASE_URL="postgresql://postgres.mynwzcvoadrkqqlfvakd:[DB_PASSWORD]@aws-0-ap-northeast-2.pooler.supabase.com:6543/postgres?pgbouncer=true"

# Direct connection to the database. Used for migrations.
DIRECT_URL="postgresql://postgres.mynwzcvoadrkqqlfvakd:[DB_PASSWORD]@aws-0-ap-northeast-2.pooler.supabase.com:5432/postgres"

 

 

 

Prisma에서 Supabase로 데이터 마이그레이션하기

데이터베이스 스키마 정의

schema.prisma 파일에서 데이터베이스 모델을 정의합니다. 예를 들어, 아래는 간단한 예시 모델입니다. 본인이 설정한 스키마를 사용하면 됩니다.

model User {
  id             String           @id @default(cuid())
  name           String?
  email          String           @unique
  emailVerified  DateTime?
  image          String?
  accounts       Account[]
  sessions       Session[]
  }

 

마이그레이션 파일 생성

Prisma CLI를 사용하여 마이그레이션 파일을 생성합니다.

npx prisma migrate dev --name init

 

이 명령어는 migrations 폴더에 SQL 마이그레이션 파일을 생성합니다. 생성된 파일은 Prisma의 데이터베이스 스키마를 Supabase 데이터베이스에 적용합니다.

 

데이터베이스 마이그레이션 적용

마이그레이션 파일을 Supabase 데이터베이스에 적용하려면 다음 명령어를 실행합니다.

npx prisma migrate dev

 

여기서 꼭, DATABASE_URL과 DIRECT_URL 환경 변수를 올바르게 설정했는지 확인해야 합니다. 하나라도 빠지면 마이그레이션이 진행되지 않습니다.

 

기존 Supabase 데이터베이스와 동기화

만약 Supabase에 Prisma를 적용하기 전의 기존 데이터베이스가 있다면, 아래 명령어를 사용하여 Prisma와 동기화할 수 있습니다.

npx prisma db pull

 

이후 Prisma 클라이언트를 생성하려면 다음 명령어를 실행합니다.

npx prisma generate

 

 

Prisma와 Supabase 사용 예시

이제 Prisma와 Supabase가 설정되었으므로 Next.js 애플리케이션에서 이를 사용하여 데이터베이스 작업을 수행할 수 있습니다. 

Prisma 클라이언트 초기화

prisma/client.ts 파일을 생성하여 Prisma 클라이언트를 초기화합니다.

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

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };

export const prisma = globalForPrisma.prisma || new PrismaClient();

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

 

 

API 라우트에서 데이터베이스 작업

app/api/posts/route.ts 파일을 생성하여 API 라우트를 정의합니다.

import { prisma } from '../prisma/client';

export async function POST(req: NextRequest) {


  // 애드센스 계정 정보를 조회
    const accountName = await prisma.adsenseAccount.findMany({
      where: { userId },
      select: { accountId: true },
    });
}

 

 

여기 까지 성공하셨다면 바로 사용하면 됩니다. 수고하셨습니다.