HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive/
⚡
Supabase/
시작하기 : Supabase 프로젝트 생성 + 키 발급

시작하기 : Supabase 프로젝트 생성 + 키 발급

✅ 1단계: Supabase 가입 및 로그인

  1. https://supabase.com 접속
  1. Start your project 또는 Sign In 클릭
  1. GitHub 계정으로 로그인

✅ 2단계: 새 프로젝트 생성

  1. 로그인 후 https://supabase.com/dashboard 이동
  1. 오른쪽 상단의 New project 버튼 클릭
  1. 아래 항목들을 입력:
항목
내용
Organization
자동 생성되었거나 직접 만드신 이름
Project name
예: fastrip
Database password
꼭 기억해두세요! (로컬 DB 접속 등에 필요함)
Region
가까운 곳 선택 (한국이면 Singapore 추천)
  1. Create new project 버튼 클릭
      2. → 약 1~2분 후에 프로젝트가 준비됩니다.

✅ 3단계: API 키 및 URL 복사

  1. 프로젝트 대시보드로 들어가기 (예: fastrip)
  1. 왼쪽 메뉴에서 Project Settings > API 클릭
여기서 아래 2가지를 복사합니다:
항목
예시
.env 변수 이름
Project URL
https://xyzcompany.supabase.co
NEXT_PUBLIC_SUPABASE_URL
Publishable 키
eyJhbGciOi...
NEXT_PUBLIC_SUPABASE_ANON_KEY
Publishable 키는 프론트엔드에서 사용 가능한 공개 키
서버에서 관리자 작업할 때는 service_role 키를 쓰지만 지금은 anon만 사용하면 충분합니다.

✅ 4단계: .env.local 파일에 환경변수 설정

Next.js 프로젝트 루트에 .env.local 파일 생성하고 다음처럼 작성하세요:
✅ NEXT_PUBLIC_ 접두사를 붙여야
브라우저에서도 접근 가능

✅ 5단계: Supabase 설치 및 클라이언트 세팅 (lib/supabase.ts)

 
  1. npm install @supabase/supabase-js 로 라이브러리 설치
  1. 클라이언트 세팅
이 클라이언트를 server or client component 어디서든 import해서 사용할 수 있어요.

✅ 6단계: Supabase 콘솔에서 테이블 만들기

  • 좌측 메뉴에서 Table Editor > Create Table
  • Course, Place, Like, User 등 테이블 생성 가능
NEXT_PUBLIC_SUPABASE_URL=https://xyzcompany.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...
// lib/supabase.ts
import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);