Next.js에서 Supabase API 키를 환경 변수로 설정하는 방법 (Error: supabaseUrl is required)

 

 

Next.js에서 Supabase API URL과 API 키를 환경 변수로 설정하는 방법에 대해 간단하게 적어볼까 한다.

왜냐?? 내가 고생했으니까..

 

 

Error 발견 : supabaseUrl is required

 

오랜만에 Supabase를 사용하게 되었다.

먼저 기본 세팅을 위해 Supabase 문서에서 알려주는 가장 보변적인 방법 대로 설정을 한 후 확인을 해보니..

 

 

아니... 왜 계속 supabaseUrl is required. 오류가...

 

 

 

 

문제 해결!!

 

사실.. 엄청 쉽게 해결이 되었다.

하지만 처음 Next.js와 supabase를 같이 사용하게 된다면 대다수의 사람들이 모르지 않을까 싶다..?

 

 

Next.js에서는 환경 변수를 사용하는 방법이 조금 다르다.

Next.js는 클라이언트 측에서 사용할 환경 변수를 NEXT_PUBLIC_ 접두어로 시작해야 되었던 것!!

이렇게 설정하면 해당 변수가 클라이언트 코드에서 접근 가능하게 된다고 한다.

 

// .env.local

NEXT_PUBLIC_SUPABASE_API_URL=***
NEXT_PUBLIC_SUPABASE_API_KEY=***

 

 

그리고 오류 없이 supabase와의 연결이 잘 되었다 ㅎㅎ

정말.. 너무 오랜만 supanova...

다시 친해지기로해..