🐳 Golden Whale
웹 개발

Next.js 15 + Supabase로 1시간 만에 MVP 구축하고 Vercel 자동 배포하기

작성일: 2026-10-07•글쓴이: goldenwhale
Advertisement

Next.js Supabase MVP 빠른 구축

아이디어가 떠올랐을 때 가장 중요한 것은 **'빠른 실행과 시장 검증(Validation)'**입니다. 수개월 동안 백엔드 인프라를 구축하느라 런칭이 늦어지면, 아이디어의 유효성을 검증하기도 전에 열정이 식어버리곤 합니다.

현재 스타트업과 1인 인디 해커들이 가장 선호하는 초고속 조합은 바로 Next.js 15 (App Router) + Supabase (BaaS) + Vercel (CI/CD 배포) 스택입니다.

회원가입/인증, PostgreSQL 데이터베이스, 그리고 자동 배포 파이프라인까지 단 1시간 만에 MVP를 완품으로 출시하는 4단계 실전 가이드를 소개합니다.

1. 1단계: Next.js 15 프로젝트 생성 및 Tailwind CSS 세팅

터미널에서 최신 Next.js 프레임워크를 템플릿으로 초기화합니다.

npx create-next-app@latest my-mvp-app --typescript --tailwind --eslint --app
cd my-mvp-app

Next.js App Router 구조는 Server Components를 기본 지원하여, 별도의 API 라우트 없이도 서버에서 Supabase DB 데이터를 직접 페칭(Fetching)할 수 있어 속도가 압도적입니다.

2. 2단계: Supabase 프로젝트 연동 및 Auth / DB 스키마 구축

Supabase에 접속하여 무료 프로젝트를 생성합니다.

  1. Client 설치:
    npm install @supabase/supabase-js @supabase/ssr
  2. 환경 변수 (.env.local) 설정:
    NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
  3. Supabase Auth 설정: Google / Email 소셜 로그인 Provider를 단 클릭 몇 번으로 활성화합니다.

3. 3단계: SSR 지원 Supabase Server/Client Helper 구성

lib/supabase/server.ts 위치에 서버 컴포넌트용 수파베이스 클라이언트를 정의합니다.

import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            );
          } catch {
            // Server Component read-only fallback
          }
        },
      },
    }
  );
}

이제 페이지 파일(app/page.tsx)에서 const supabase = await createClient()로 즉시 사용자 세션과 DB 데이터를 불러올 수 있습니다.

4. 4단계: GitHub push 및 Vercel 원클릭 배포

  1. 코드 작성이 완료되면 GitHub 리포지토리에 커밋 후 푸시합니다.
  2. Vercel에 로그인 후 해당 GitHub 리포지토리를 Import 합니다.
  3. Environment Variables 탭에 Supabase URL 및 ANON_KEY를 등록하고 Deploy를 클릭합니다.
  4. 단 1분 만에 전 세계 edge 네트워크를 통해 작동하는 라이브 웹 서비스 URL이 완성됩니다!

✍️ 결론

완벽함보다는 **'빠른 런칭(Done is better than perfect)'**이 중요합니다. Next.js 15와 Supabase의 막강한 조합을 통해 여러분의 머릿속 아이디어를 오늘 바로 세상에 보여주세요!