# [Next.js + TS 실전] 6. Neon Postgres 연결하기

[Next.js + TS 실전] 6. Neon Postgres 연결하기

실전 3편에서 “Vercel에는 SQLite 파일 DB가 안 맞다”고 했습니다.
이번 편은 Neon(Postgres) 으로 바꿔, 배포 환경에서도 메모가 남게 합니다.
목표: provider 변경 · 마이그레이션 · 로컬/Vercel DATABASE_URL.

---

이 편에서 할 일

1. 왜 Neon인지 짧게 이해하기
2. Neon 프로젝트 만들고 연결 문자열 받기
3. Prisma provider를 postgresql로 바꾸기
4. 마이그레이션을 Postgres에 적용하기
5. Vercel 환경 변수에 DATABASE_URL 넣기

앱 코드(lib/memos.ts, Action, 페이지)는 거의 안 바꿉니다.
바꾸는 건 DB 종류와 연결 정보입니다.

---

왜 Neon인가

선택	한 줄
Neon	서버리스 Postgres, 무료 티어, Prisma와 궁합 좋음
Supabase	Postgres + 부가 기능이 많음 (이번 편 범위 밖)
로컬 SQLite	로컬 학습용으로 계속 써도 됨

Neon을 고른 이유:

• Vercel 같은 서버리스와 잘 맞음
• Connection string만 바꾸면 Prisma가 거의 그대로 동작
• 무료로 시작하기 쉬움

UI 메뉴 이름은 자주 바뀝니다.
프로젝트 생성 → Connection string 복사 만 기억하면 됩니다.

---

전체 그림

로컬 / Vercel 앱
      ↓
 DATABASE_URL (환경 변수)
      ↓
 Prisma Client
      ↓
 Neon Postgres (클라우드)

SQLite 때:

DATABASE_URL="file:./dev.db"

Neon 때:

DATABASE_URL="postgresql://..."

---

1) Neon에서 DB 만들기

1. https://neon.tech 가입
2. 새 프로젝트 생성
3. Connection string 복사
   (보통 postgresql://... 형태)

예시 형태 (값은 본인 것):

postgresql://USER:PASSWORD@HOST/neondb?sslmode=require

비밀번호가 들어 있습니다. GitHub에 올리지 마세요.
.env / Vercel Environment Variables에만 둡니다.

---

2) 로컬 .env 바꾸기

memo-app/.env:

DATABASE_URL="postgresql://USER:PASSWORD@HOST/neondb?sslmode=require"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

이전 SQLite용 file:./dev.db는 주석 처리하거나 지웁니다.

로컬에서도 Neon을 쓰면:

• PC를 꺼도 데이터가 클라우드에 남음
• 팀원과 같은 DB를 볼 수 있음 (주의: 연습용 키 관리)

원하면 로컬은 SQLite, 배포만 Neon으로 나눌 수도 있습니다.
이번 편은 로컬도 Neon으로 통일해서 흐름을 단순하게 갑니다.

---

3) Prisma 스키마: provider 변경

prisma/schema.prisma:

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

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

model Memo {
  id        String   @id @default(cuid())
  title     String
  content   String
  userId    String
  createdAt DateTime @default(now())

  @@index([userId])
}

바뀐 핵심은 한 줄입니다.

provider = "sqlite"  →  provider = "postgresql"

Memo 모델은 그대로입니다.
(@@index([userId])는 있으면 조회에 도움이 됩니다.)

---

4) 마이그레이션을 Neon에 적용

SQLite용 마이그레이션 히스토리가 있으면 Postgres와 충돌할 수 있습니다.
연습 단계에서는 아래 둘 중 하나를 고르세요.

방법 A) 새 DB에 스키마만 밀어넣기 (가장 단순)

테이블이 비어 있는 Neon이라면:

npx prisma db push
npx prisma generate

db push는 마이그레이션 파일 없이 스키마를 DB에 맞춥니다.
프로토타입·학습에 편합니다.

방법 B) migrate로 정식 적용

npx prisma migrate dev --name postgres-init

기존 SQLite 마이그레이션 폴더 때문에 꼬이면:

1. prisma/migrations를 백업/삭제 (로컬 연습 한정)
2. 다시 migrate dev --name init

실서비스에서는 히스토리를 함부로 지우면 안 됩니다.
혼자 쓰는 메모 앱 연습이라면 A 또는 “migrations 초기화 후 다시”가 현실적입니다.

시드:

npx prisma db seed

시드의 userId: "seed-user"는 Clerk 로그인 유저와 다릅니다.
목록 확인은 로그인 후 새 메모 작성으로 하세요.

---

5) 동작 확인 (로컬)

npm run dev

1. 로그인
2. /memos/new에서 메모 작성
3. Neon Console → Tables에서 행이 보이는지 확인

보이면 클라우드 DB 연결 성공입니다.

---

6) Vercel에 DATABASE_URL 넣기

1. Vercel Project → Settings → Environment Variables
2. 추가:

Name	Value
DATABASE_URL	Neon 연결 문자열
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk 공개 키
CLERK_SECRET_KEY	Clerk 비밀 키

3. Production / Preview 체크
4. Redeploy

빌드 스크립트 권장 (package.json):

{
  "scripts": {
    "dev": "next dev",
    "build": "prisma generate && next build",
    "start": "next start",
    "postinstall": "prisma generate"
  }
}

Vercel 빌드 머신에서 Prisma Client가 생성되게 합니다.

프로덕션 마이그레이션은 보통:

npx prisma migrate deploy

을 CI나 배포 전에 한 번 실행합니다.
db push로만 맞춰 둔 상태면, 배포 전에도 스키마가 Neon에 이미 있어야 합니다.

---

코드는 왜 거의 안 바꾸나

lib/memos.ts는 여전히:

await prisma.memo.findMany({ where: { userId }, ... })

Prisma가 SQL 방언(SQLite vs Postgres)을 감춥니다.
그래서 실전 2편에서 데이터 레이어를 분리해 둔 것이 여기서 이득이 됩니다.

가끔 달라지는 것:

• 일부 raw SQL
• 타입/기본값 디테일
• 연결 풀 (서버리스에서는 Neon의 pooled URL을 쓰는 경우도 있음)

입문 다음 단계에서는 Connection string 하나로 충분합니다.
연결이 불안정하면 Neon 대시보드의 pooled connection 문자열을 써 보세요.

---

자주 하는 실수

1. .env의 따옴표/복붙 깨짐
→ 비밀번호에 특수문자가 있으면 URL 인코딩 필요할 수 있음

2. Vercel에 DATABASE_URL 안 넣음
→ 로컬만 되고 배포만 실패

3. SQLite dev.db를 그대로 커밋/배포 기대
→ Neon으로 바꾼 뒤에는 의미 없음

4. provider만 바꾸고 migrate/db push를 안 함
→ 테이블이 없어 런타임 에러

5. Clerk 키는 넣었는데 DB URL만 빠짐 (또는 반대)
→ 로그인 되는데 저장 실패 / 저장은 되는데 로그인 실패

6. 시드 메모가 로그인 목록에 안 보임
→ userId: "seed-user"라서 정상. 새 글로 확인

---

이 편에서 가져갈 것

• Vercel 배포 앱의 DB는 외부 Postgres가 맞다
• Neon = 시작하기 쉬운 서버리스 Postgres
• Prisma는 provider + DATABASE_URL만 바꿔도 앱 코드를 유지하기 쉽다
• 비밀 값은 .env / Vercel env에만 둔다
• 로컬에서 한 번 쓰고, 같은 URL(또는 별도 prod URL)을 배포에 연결한다

---

다음에 이어가면 좋은 것

• 삭제 확인 UI / 목록 검색 (짧은 UX 보강)
• 시리즈 FAQ·총정리
• 로컬 SQLite + 배포 Neon을 .env로 나누는 팀 워크플로

---

시리즈 목차 (실전)

1. 메모 수정과 삭제
2. Prisma + SQLite로 DB 붙이기
3. Vercel에 배포하기
4. 폼 검증하기 (zod)
5. 로그인 붙이기 (Clerk)
6. Neon Postgres 연결하기 ← 지금