EN

페이지 1: 기본 설정 및 Supabase 프로젝트 생성

1. 기본 설정 및 Supabase 프로젝트 생성

이 섹션에서는 첫 번째 Supabase 프로젝트를 설정하고 이를 새로운 Next.js (App Router) 애플리케이션에 연결하는 방법을 안내합니다. 이는 전체 스택 애플리케이션을 구축하는 기반이 됩니다.

1.1. Supabase 프로젝트 생성

Supabase 대시보드에 접속하여 로그인한 후 "New project"를 클릭합니다. 원하는 지역을 선택하고 새 프로젝트를 생성합니다. 생성 후 프로젝트 설정 > API로 이동하여 프로젝트의 URL과 anon 공개 키를 찾습니다.

1.2. Next.js 프로젝트 초기화 (App Router)

App Router를 사용하여 새 Next.js 프로젝트를 생성합니다. 프롬프트가 표시될 때 App Router에 대해 "Yes"를 선택해야 합니다.

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

1.3. Supabase 클라이언트 라이브러리 설치

Next.js 프로젝트에 필요한 Supabase 클라이언트 라이브러리를 설치합니다.

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

1.4. 환경 변수 구성

Next.js 프로젝트 루트에 .env.local 파일을 생성하고 Supabase 프로젝트 URL과 anon 키를 추가합니다.

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

참고: NEXT_PUBLIC_ 접두사는 이 변수들을 클라이언트 측에서 사용할 수 있게 합니다.

1.5. Supabase 클라이언트 인스턴스 생성

Next.js 프로젝트에서 Supabase 클라이언트를 초기화하는 유틸리티 파일(예: lib/supabase/client.ts 및 lib/supabase/server.ts)을 생성합니다. 이 구분은 App Router에 매우 중요합니다.

클라이언트 측 Supabase 클라이언트 (lib/supabase/client.ts):

import { createBrowserClient } from '@supabase/ssr'

export const createClient = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )

서버 측 Supabase 클라이언트 (lib/supabase/server.ts):

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

export const createClient = () => {
  const cookieStore = cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: any) {
          cookieStore.set({ name, value, ...options })
        },
        remove(name: string, options: any) {
          cookieStore.set({ name, value: '', ...options })
        },
      },
    }
  )
}

이제 Supabase와 상호 작용할 준비가 된 기본 Next.js 프로젝트를 갖게 되었습니다.

Contact Us