Supabase 오류 - "Invalid URL" 해결 방법

 

Next.js 프로젝트에 Supabase를 연동하다가 다음과 같은 오류가 나면 확인해보자:

Error: Failed to construct 'URL': Invalid URL

해당 오류 원인

• .env.local 파일에 SUPABASE_URL이 다음과 같이 뛰어졌거나,
• 정의되지 않은 변수(undefined)가 createClient()로 전달되면 개체 URL 처리에서 오류가 발생한다.

---

해결 방법

• .env.local에 필요 값 설정

NEXT_PUBLIC_SUPABASE_URL=https://<your-project>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-anon-key>

• 2. Supabase 컨솔 > Project Settings > API 화면에서 URL 및 anon key 복사

• supabaseClient.js에 이름 및 예제 추가

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error("Supabase 환경 변수가 설정되지 않았습니다.");
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

• Next.js dev 서버 다시 시작

npm run dev

---

마무리 핀터

.env.local 변경 후에는

다시 시작 해야 한다! 그래야 변경된 환경변수가 반영된다.