[Vercel + Supabase] 최고의 풀스택 개발 환경 구축하기 (Next.js 연동 가이드)

 

안녕하세요! 오늘은 프론트엔드 개발자들에게 가장 사랑받는 배포 플랫폼인 Vercel과, 오픈소스 Firebase 대체재로 강력한 인기를 끌고 있는 Supabase를 연동하는 방법에 대해 알아보겠습니다.

 

Next.js와 같은 프레임워크를 Vercel에 배포할 때, Supabase를 백엔드로 사용하면 개발자 경험(DX)이 극대화됩니다. 특히 Vercel의 Integrations(통합) 기능을 사용하면 환경 변수(Environment Variables)를 수동으로 복사하고 붙여넣을 필요 없이 클릭 몇 번만으로 완벽하게 연동할 수 있습니다.

그럼 바로 시작해볼까요? 🚀

---

🛠 준비물

• Vercel 계정
• Supabase 계정
• 연동할 Next.js 프로젝트 (또는 React 등의 프론트엔드 프로젝트)

---

Step 1. Supabase 프로젝트 생성하기

1. Supabase 공식 홈페이지에 로그인합니다.
2. [New Project] 버튼을 눌러 새로운 프로젝트를 생성합니다.
3. 데이터베이스 비밀번호와 리전을 설정하고 프로젝트가 준비될 때까지 몇 분 정도 기다립니다.

💡 Tip: 이전에 수동으로 설정할 때는 여기서 API Key와 URL을 복사해야 했지만, Vercel Integration을 사용하면 이 과정을 자동화할 수 있습니다!

---

Step 2. Vercel 프로젝트 생성 및 배포

Vercel에 이미 배포된 프로젝트가 있다면 이 단계는 건너뛰어도 좋습니다.

1. 로컬에서 Next.js 프로젝트를 생성합니다.

   npx create-next-app@latest my-supabase-app

2. GitHub에 프로젝트를 푸시합니다.
3. Vercel 대시보드에서 [Add New...] -> [Project]를 선택하여 해당 GitHub 레포지토리를 연결하고 배포(Deploy)합니다.

---

Step 3. Vercel에서 Supabase Integration 연결하기 (핵심 ⭐️)

이제 두 서비스를 마법처럼 연결해 볼 차례입니다.

1. Vercel 대시보드 상단 메뉴에서 [Integrations] 탭으로 이동하거나 Integrations Marketplace에 접속합니다.
2. 검색창에 "Supabase"를 검색하고 선택합니다.
3. [Add Integration] 버튼을 클릭합니다.
4. 연동할 Vercel 계정(또는 팀)과 특정 프로젝트를 선택합니다.
5. Supabase 연결 창이 뜨면, 연동할 Supabase 프로젝트를 선택합니다.

완료되었습니다! 🎉
이제 Vercel 프로젝트의 [Settings] -> [Environment Variables]에 가보시면 NEXT_PUBLIC_SUPABASE_URL과 NEXT_PUBLIC_SUPABASE_ANON_KEY 등이 자동으로 주입된 것을 확인할 수 있습니다.

---

Step 4. 로컬 환경으로 환경변수 가져오기

Vercel에 등록된 환경변수를 내 로컬 개발 환경(.env.local)으로 바로 가져올 수 있습니다. 터미널에서 다음 명령어를 실행하세요.

# Vercel CLI가 없다면 먼저 설치
npm i -g vercel

# Vercel 프로젝트 연결
vercel link

# 환경변수 다운로드
vercel env pull .env.local

이제 로컬 .env.local 파일에 Supabase 환경변수가 쏙 들어온 것을 볼 수 있습니다.

---

Step 5. 프로젝트에서 Supabase 사용하기 (Next.js 예시)

이제 코드를 작성하여 DB와 통신해 볼 차례입니다. 최신 Next.js App Router 방식을 기준으로 설명합니다.

1. 패키지 설치

npm install @supabase/supabase-js @supabase/ssr

2. Supabase 클라이언트 유틸리티 생성

utils/supabase/client.ts 파일을 생성하고 아래 코드를 작성합니다.

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

3. 컴포넌트에서 데이터 불러오기

app/page.tsx 등에서 Supabase의 데이터를 불러와 화면에 그려줍니다.

import { createClient } from '@/utils/supabase/client'

export default async function Home() {
  const supabase = createClient()

  // 'posts' 테이블에서 데이터 가져오기 예시
  const { data: posts, error } = await supabase
    .from('posts')
    .select('*')

  if (error) {
    return <div>데이터를 불러오는 중 에러가 발생했습니다.</div>
  }

  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold mb-4">게시글 목록</h1>
      <ul>
        {posts?.map((post) => (
          <li key={post.id} className="mb-2 p-4 border rounded shadow">
            {post.title}
          </li>
        ))}
      </ul>
    </main>
  )
}

---

🎯 마무리

Vercel Integration을 활용해 Supabase를 연결하면, 귀찮은 환경 변수 관리와 오타로 인한 에러를 원천적으로 방지할 수 있습니다. 또한, 브랜치별 환경 변수(Preview, Production) 관리도 Vercel이 알아서 해주기 때문에 개발자는 오직 '기능 구현'에만 집중할 수 있죠.

Next.js로 사이드 프로젝트나 서비스를 준비하고 계신다면, Vercel + Supabase 조합을 강력하게 추천합니다!

질문이나 막히는 부분이 있다면 댓글로 남겨주세요. 감사합니다! 😊