Vercel 배포하면 "supabaseUrl is required" 에러가 날 때

이런 증상이라면

로컬(npm run dev)에서는 잘 되는데, Vercel에 배포하면 "Error: supabaseUrl is required."로 빌드가 실패하거나 페이지가 500 에러가 납니다.

🔎 이 문제는 대부분 코드가 아니라 대시보드·설정에 있습니다. AI에게 코드를 고쳐달라고 반복해도 안 풀리는 이유예요.

흔한 원인 (가능성 순)

1Vercel에 환경변수를 안 넣었다환경변수

.env.local 파일은 로컬 전용이라 배포에 올라가지 않습니다. Vercel 프로젝트 설정에 NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEY를 따로 등록해야 합니다.

2환경변수를 넣고 재배포를 안 했다대시보드

Vercel은 환경변수를 바꿔도 자동 재배포하지 않습니다. 추가한 뒤 반드시 Redeploy 해야 반영됩니다.

3NEXT_PUBLIC_ 접두사 누락환경변수

브라우저에서 쓰는 Supabase URL/anon key는 NEXT_PUBLIC_ 접두사가 있어야 클라이언트 번들에 포함됩니다. 접두사가 없으면 빌드 후 값이 undefined가 됩니다.

Vercel 프로젝트 > Settings > Environment Variables 로 이동
NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY 추가 (Production/Preview/Development 모두 체크)
값은 Supabase 대시보드 > Project Settings > API 에서 복사
Deployments 탭에서 최신 배포를 Redeploy

.env.local을 커밋하면 되나요?

아니요. .env.local에는 보통 시크릿이 들어가서 커밋하면 안 됩니다. Vercel 환경변수 설정에 넣는 것이 정석입니다.

넣었는데도 계속 undefined예요.

재배포를 안 했거나, 접두사(NEXT_PUBLIC_)가 없거나, 환경 스코프(Production 등) 체크가 빠졌을 가능성이 높습니다. 세 가지를 순서대로 확인하세요.

위를 다 해봤는데도, 또는 AI(Cursor·Claude)한테 물어봐도 계속 같은 에러라면 — 에러 로그를 붙여넣으면 60초 안에 진짜 원인을 짚어드려요.