왜 한 번 더 넣나

Vercel은 Git에 있는 파일로 빌드한다. .env.local은 커밋하지 않으므로 배포 기계에 없다. 로컬 개발은 .env.local을 쓰고, 배포는 프로젝트의 Environment Variables를 쓴다. 이름은 같아야 한다.

NEXT_PUBLIC_SUPABASE_URL=프로젝트 URL
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=publishable 키

이 두 이름은 Supabase 연결 단원과 같다. 값은 그 프로젝트의 API 설정에서 복사한다.

어디에 적용되나

변수를 저장할 때 환경을 고른다. 고르지 않은 환경의 배포에는 그 값이 없다.

환경	쓰이는 배포
Production	운영 브랜치(main) 배포. 방문자가 보는 주소.
Preview	그 외 브랜치와 Pull Request. 미리보기 주소에서 Supabase가 비어 있으면 여기 값이 없는 경우가 많다.
Development	vercel dev나 vercel env pull로 받는 로컬 값. npm run dev만 쓸 때는 여전히 .env.local이 읽힌다.

공개 키 두 개는 Production과 Preview를 모두 켠다. Preview만 다른 Supabase 프로젝트를 쓰면, 그 브랜치에만 다른 값을 둔다. 같은 이름의 브랜치 값이 공통 Preview 값보다 우선한다.

secret 키

• publishable 키만 NEXT_PUBLIC_로 시작한다. 이 값은 브라우저 번들에 들어간다.
• secret 키는 NEXT_PUBLIC_가 아닌 이름으로 둔다. 서버 코드만 process.env로 읽는다. 기준은 Supabase · 인증·키와 같다.
• 대시보드에서 Sensitive로 저장하면 저장 후 값을 다시 보여 주지 않는다. 팀원에게 채팅으로 붙여 넣지 않는다.

Next.js는 미리보기 배포를 빌드할 때도 NODE_ENV를 production으로 둔다. .env.production 파일로 미리보기와 운영을 나누지 않는다. 나눌 때는 위의 환경 체크를 쓴다. 코드에서 구분해야 하면 process.env.VERCEL_ENV가 production, preview, development 중 하나다.

값을 바꾼 뒤 이미 떠 있는 배포는 옛 값을 유지한다. 다시 배포해야 새 값이 적용된다. 변수 설명은 Vercel 환경 변수 문서 (새 창)를 본다.