[Next.js] - Supabase 연결하기

Develope/NEXT

[Next.js] - Supabase 연결하기

ccuccu 2025. 1. 16. 00:07

사실 supabase는 강의를 들으면서 알게 된 오픈 소스인데, 와 진짜 편해서 다음에도 혼자 작은 토이 프로젝트를 할 때 유용할 것 같아 헤매지 않기 위해 기록하려 한다. :>

기존에는 백엔드 친구가 웹 배포나 api 생성 등을 도맡아서 해줬는데, 친구도 회사 생활도 있고, 자기 생활도 있으니 계속해서 부탁하기가 조금 미안하기도 하고, 새로이 공부를 위해 풀스택으로 사용 가능한 Next를 공부, 프로젝트를 진행하려고 프로그래밍 언어는 Next로 선택했다.

1. Supabase란?

Supabase is an open source Firebase alternative.
Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings.

공식 홈페이지에서 소개하는 글을보면 파이어베이스를 대체할 수 있는 오픈 소스라고 되어있는데, Postgres DB를 사용할 수 있고, 인증, API 등의 기능을 사용할 수 있다고 한다.

조금 더 찾아보니, supabase 자체 제공 기능으로 로그인, 회원가입등은 물론이고 별다른 db 에디터가 없어도 홈페이지에서 GUI로 테이블을 생성, 연결할 수도 있다. 이외에도 많은 기능이 있지만 파일 업로드, 저장 등의 포괄적으로 웹 서버를 사용할 수 있다.

특히 이번에, 회원가입과 로그인 기능에서 도움을 받은 이메일 인증이나 카카오톡 로그인 등의 OAuth 기능도 사용가능하여 프로젝트에 적극 활용하려고 한다.

2. Supabase 사용법

해당 방법은 https://supabase.com/docs/guides/getting-started/quickstarts/nextjs https://supabase.com/docs/guides/auth/server-side/nextjs 공식 문서의 가이드를 보고 그걸 기반으로 App Router로 생성된 내 프로젝트와 연결하였다.

간단한 소개글 밑에 Start Your Project 버튼을 클릭하면, 로그인 회원가입 후 이름, 용도, 가격 등을 선택하면 Organization을 생성할 수 있다. 무료로 선택하면 3개의 project를 만들 수 있다.

후에 project를 생성하는데, 조직 선택처럼 이름, 비밀번호(자동 생성이 되니 자동 생성 후 메모장 등에 복사해놔도 편하고, 잃어버려도 다시 설정할 수 있으니 너무 걱정말자!), 지역을 선택해준다.

밑에 보면 접힌 글로 보안 설정 등을 추가로 변경할 수 있는데, 나는 바꿀 필요가 없어 바로 생성 버튼을 눌러줬다.

프로젝트를 무사히 생성했다면, 이제 내 로컬에 있는 프로젝트와 연동을 해야한다.

3. Next와 Supabase 연동하기

로컬 프로젝트에 파일 루트 경로에 .env.local 이라는 파일을 하나 만들어준다.

NEXT_PUBLIC_SUPABASE_URL=내 프로젝트 경로
NEXT_PUBLIC_SUPABASE_ANON_KEY=내 ANON Key

를 적어줘야 하는데, 해당 내용은

프로젝트를 들어간 후 Connect 버튼을 클릭, App Framework 탭란에서 확인할 수 있다.

참고로 아까 위에 있던 공식 가이드에서도 원하는 프로젝트 경로와 ANON 키를 바로 복사할 수 있다.

파일에 해당 프로젝트 정보를 써줬다면 다시 app 내부에 utils / supabase 라는 경로의 폴더를 만들어줬다. 이건 본인 프로젝트나 개발 성향에 맞춰 작성해주면 되는데, 난 그냥 깊게 생각하지 않고 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!
  )
}

supabase의 기능을 사용하기 위해 프로젝트와 anon key 값을 가져와서 export 해준다.

Q. 공식 사이트를 보면 client.ts와 server.ts 파일을 구분해서 생성하는데 왤까?
A. 효율적으로 역할을 분리하기 때문에.
1. 보안적인 측면에서. client의 경우 우리가 사용하는 웹 브라우저에서 보안 정보가 탈취되거나 보안 이슈가 생길 수 있으나, server에서 supabase를 사용하면 db, 쿠키 등의 정보를 숨길 수 있다.
2. 용도의 측면에서, client는 인터페이스를 server는 서버, db의 제어하기 위해
그렇기 때문에 client와 server를 알맞게 사용하는게 중요하다.

4. Next와 Supabase 연동 확인하기

연결 했으면, 연결이 잘 됐는지 확인을 해보자!

'use client'

import { useEffect } from 'react;
import { createClient } from '@/utils/supabase/client';

export default function Page() {
	const supabase = createClient();
    
	useEffect(() => {
    	console.log(supabase)
    } ,[])
}

콘솔로 supabase 정보를 확인해보면 supabaseUrl에 내가 .env.local 파일에 써놓은 경로가 뜬 것을 체크하며 연동이 된 것을 확인 할 수 있다.

근데 솔찍히 공식 문서에서 다 써줘서 복사 붙여넣기만 하면 된다. 우리한테 필요한건 이해..일지도